Angular进阶-NVM管理Node.js实现不同版本Angular环境切换

news2024/12/27 15:04:53

一、NVM介绍

1. NVM简介

Node Version Manager(NVM)是一个用于管理多个Node.js版本的工具。它允许用户在同一台机器上安装和使用多个Node.js版本,非常适合需要同时进行多个项目的开发者。NVM是开源的,支持MacOS、Windows和Linux操作系统。

2. NVM原理

NVM通过修改PATH环境变量,控制不同命令行会话中使用的Node.js版本。它不需要管理员权限,可以在用户的主目录中安装Node.js版本,并将它们隔离开来。通过执行简单的命令,用户可以选择正在使用的Node.js版本,这使得在不同版本之间切换变得非常简单。

3. NVM的优势

  • 版本管理灵活:允许在同一系统中安装多个Node.js版本,并能轻松切换。
  • 环境隔离:每个Node.js版本都在用户空间内独立安装,不会互相影响。
  • 无需管理员权限:用户可以在其主目录下安装和维护Node.js版本,无需管理员权限。
  • 支持自动切换:通过.nvmrc文件自动切换项目所需的Node.js版本。

二、常用Node.js版本对照

1. Node.js和Vue版本对照表

Vue.js 版本推荐 Node.js 版本兼容 TypeScript 版本
Vue 3.xNode.js 12 或更高TypeScript 3.9 或更高
Vue 2.6Node.js 10 或更高TypeScript 3.5 或更高
Vue 2.5Node.js 10TypeScript 2.6 或更高
Vue 2.4 及以下Node.js 8TypeScript 不推荐

注意:

  • Vue 3.x 被完全重写以支持 TypeScript,建议使用 TypeScript 3.9 或更高版本。
  • Vue 2.5 引入了对 TypeScript 的改进支持,推荐至少使用 TypeScript 2.6。
  • 较早的 Vue.js 版本(2.4 及以下)并没有针对 TypeScript 提供优化支持,在这些版本中使用 TypeScript 需要额外的配置,不推荐。

2. Node.js和Angular版本对照表

Angular作为一个更为严格的框架,其版本通常要求较新的Node.js版本。以下是Angular版本与Node.js版本的推荐对照表:

Angular 版本推荐 Node.js 版本兼容 TypeScript 版本
Angular 17.1.0^18.13.0 或 ^20.9.0>=5.2.0 < 5.4.0
Angular 17.0.x^18.13.0 或 ^20.9.0>=5.2.0 < 5.3.0
Angular 16.1.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.2.0
Angular 16.2.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.2.0
Angular 16.0.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.1.0
Angular 15.1.x^14.20.0 或 ^16.13.0 或 ^18.10.0>=4.8.2 < 5.0.0
Angular 15.2.x^14.20.0 或 ^16.13.0 或 ^18.10.0>=4.8.2 < 5.0.0
Angular 15.0.x^14.20.0 或 ^16.13.0 或 ^18.10.0~4.8.2
Angular 14^14.15.0 或 ^16.10.0>=4.6.4 < 4.9.0
Angular 13^12.20.2 或 ^14.15.0 或 ^16.10.0>=4.4.4 < 4.7.0
Angular 12^12.14.1 或 ^14.15.0>=4.2.4 < 4.4.0
Angular 11^10.13.0 或 ^12.11.1>=4.0.8 < 4.2.0
Angular 10^10.13.0 或 ^12.11.1>=3.9.4 < 4.1.0
Angular 9^10.13.0 或 ^12.11.1>=3.6.5 < 3.9.0
Angular 8^10.9.0~3.4.5 或 ~3.5.3
Angular 7^8.9.4 或 ^10.9.0~3.1.6 或 ~3.2.4
Angular 6^8.9.4~2.7.2 或 ~2.9.2
Angular 5^6.9.5 或 ^8.9.4~2.5.3
Angular 4^6.9.5~2.4.2
Angular 2^6.9.5~2.0.10 或 ~2.2.2 或 ~2.3.4

3. Node.js和React版本对照表

React 版本推荐 Node.js 版本兼容 TypeScript 版本
React 18Node.js 14 或更高TypeScript 4.5 或更高
React 17Node.js 12 或更高TypeScript 4.1 或更高
React 16Node.js 10 或更高TypeScript 3.7 或更高
React 15Node.js 8TypeScript 2.8 或更高
React 0.14 及以下Node.js 6TypeScript 1.8 或更高

三、安装NVM步骤

1. 下载安装NVM

GitHub (https://github.com/coreybutler/nvm-windows/releases) 下载NVM。
在这里插入图片描述
下载完成后双击.exe安装程序安装。
在这里插入图片描述
选择NVM的安装路径和Node.js的安装路径,Node.js的安装路径是一个临时文件夹,在NVM的路径下有已安装的所有版本的Node.js,当我们选中应用哪个版本的Node.js时,Node.js的安装路径下变成哪一个版本的Node.js的复制。
在这里插入图片描述
继续安装。
在这里插入图片描述
安装完成。
在这里插入图片描述
通过运行nvm version来验证NVM是否正确安装。


2. 配置Node.js路径到环境变量

把我们刚刚安装NVM时选择的Node.js安装的路径写到path里。
在这里插入图片描述
在这里插入图片描述
这样我们才能在控制台直接使用npm命令。


3. NVM安装Node.js

我们先安装较新版本的Node.js 20.9.0。

   nvm install 20.9.0

在这里插入图片描述
切换当前版本为我们刚刚安装的Node.js 20.9.0。

	nvm use 20.9.0

再次检查一下是否为该版本。

	node -v

接着我们安装Angular 17。

	npm i -g @angular/cLi@17

在这里插入图片描述
安装成功。


4. NVM安装多版本Node.js

我们再安装18.10.0版本的Node.js。

   nvm install 18.10.0

在这里插入图片描述
这时候通过nvm list可以看到我们所有已经安装的Node.js的版本,通过 nvm use 18.10.0 可以灵活切换当前使用的版本。

	nvm list
	nvm use 18.10.0

在这里插入图片描述


5. NVM切换Node.js实现Angular多版本安装

下面我们切换Node.js版本为18.10.0,安装Angular 15。
在这里插入图片描述
安装成功。
可见,使用NVM进行Node.js的多版本控制与隔离,可以帮助我们在同一个操作系统里安装多个版本的Angular/Vue等前端库,以实现不同项目依赖的需求。


6. .nvmrc文件实现项目的自动版本控制

可以在项目根目录下创建一个名为 .nvmrc 的文件,文件内容是项目所需的 Node.js 版本号。
例如,如果你的项目需要 Node.js 版本 14.17.0,那么 .nvmrc 文件的内容应该是:

	14.17.0

当你进入项目目录时,可以运行以下命令来自动切换到 .nvmrc 文件指定的 Node.js 版本:

	nvm use

如果你的系统中尚未安装该版本的 Node.js,NVM 将提示你安装它。


四、NVM管理多版本Node.js教程总结

通过NVM(Node Version Manager),开发者可以非常灵活地管理不同的Node.js版本,以满足不同项目的需求。使用NVM,你可以避免版本冲突和环境污染问题,更高效地进行Node.js应用的开发和测试。通过理解和利用NVM的优点,你可以在现代Web开发中保持高效和竞争力。

NVM的核心功能允许你在同一台机器上安装和切换多个Node.js版本。这意味着你可以轻松测试你的应用在不同Node.js版本下的表现,确保应用的兼容性和稳定性。例如,如果一个老项目需要Node.js的早期版本而新项目需要最新版本,NVM使得在这两个版本之间切换变得无缝和简单。

此外,NVM还支持自动版本控制。通过在项目的根目录下放置一个 .nvmrc 文件,该文件指定了项目所需的Node.js版本,NVM可以自动切换到该版本。这使得团队成员在初次运行项目时能够自动使用正确的Node.js版本,降低了配置错误的风险。

NVM的安装和使用也非常直接。通过简单的命令行指令,你可以安装多个版本的Node.js,并通过命令快速切换当前使用的版本。NVM还提供了一些有用的命令来列出已安装的版本、安装新版本或删除旧版本,使得Node.js版本的管理更加直观和方便。

总之,NVM是每个Node.js开发者工具箱中的必备工具。它不仅提高了开发的灵活性和效率,还通过确保每个项目都使用合适的Node.js版本来增强了代码的可维护性和团队的协作效率。通过投入时间学习和掌握NVM,你可以确保自己在快速发展的技术环境中保持竞争力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1643461.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LLM应用:工作流workflow创建自定义模版使用

参考: https://www.coze.cn/ 本案例是在coze平台上操作的,也有其他工具支持工作流的创建例如dify;也例如图像生成的comfyui工作流工具 创建自定义模版 可以根据自己需求创建自己的工作流工具;本文案例是创建一个联网搜索的LLM应用: 创建工作流页面: https://www.coze.c…

Java面试——不安全的集合类

​ 系统性学习&#xff0c;移步IT-BLOG-CN Java 中有许多的集合&#xff0c;常用的有List&#xff0c;Set&#xff0c;Queue&#xff0c;Map。 其中 List&#xff0c;Set&#xff0c;Queue都是Collection&#xff08;集合&#xff09;&#xff0c;List中<>的内容表示其中…

Linux CPU 飙升 排查五步法

排查思路-五步法 1. top命令定位应用进程pid 找到最耗时的CPU的进程pid top2. top-Hp[pid]定位应用进程对应的线程tid 找到最消耗CPU的线程ID // 执行 top -Hp [pid] 定位应用进程对应的线程 tid // 按shift p 组合键&#xff0c;按照CPU占用率排序 > top -Hp 111683.…

华为手机ip地址怎么切换

随着移动互联网的普及&#xff0c;IP地址成为了我们手机上网的重要标识。然而&#xff0c;在某些情况下&#xff0c;我们可能需要切换手机的IP地址&#xff0c;以更好地保护个人隐私、访问特定地区的内容或服务&#xff0c;或者出于其他网络需求。华为手机作为市场上的热门品牌…

【uniapp】H5+、APP模拟浏览器环境内部打开网页

前言 今天将智能体嵌入到我的项目中&#xff0c;当作app应用时&#xff0c;发现我使用的webview组件&#xff0c;无论H5怎么登录都是未登录&#xff0c;而APP却可以&#xff0c;于是进行了测试&#xff0c;发现以下几种情况&#xff1a; 方法<a>标签webviewAPP✅✅网页…

Spring扩展点(一)Bean生命周期扩展点

Bean生命周期扩展点 影响多个Bean的实例化InstantiationAwareBeanPostProcessorBeanPostProcessor 影响单个Bean的实例化纯粹的生命周期回调函数InitializingBean&#xff08;BeanPostProcessor 的before和after之间调用&#xff09;DisposableBean Aware接口在生命周期实例化过…

Hive大数据任务调度和业务介绍

目录 一、Zookeeper 1.zookeeper介绍 2.数据模型 3.操作使用 4.运行机制 5.一致性 二、Dolphinscheduler 1.Dolphinscheduler介绍 架构 2.架构说明 该服务内主要包含: 该服务包含&#xff1a; 3.FinalShell主虚拟机启动服务 4.Web网页登录 5.使用 5-1 安全中心…

[入门] Unity Shader前置知识(5) —— 向量的运算

在Unity中&#xff0c;向量无处不在&#xff0c;我想很多人都使用过向量类的内置方法 normalized() 吧&#xff0c;我们都知道该方法是将其向量归一化从而作为一个方向与速度相乘&#xff0c;以达到角色朝任一方向移动时速度都相等的效果&#xff0c;但内部具体是如何将该向量进…

【计算机科学速成课】笔记二

笔记一 文章目录 7.CPU阶段一&#xff1a;取指令阶段阶段二&#xff1a;解码阶段阶段三&#xff1a;执行阶段 8.指令和程序9.高级CPU设计——流水线与缓存 7.CPU CPU也叫中央处理器&#xff0c;下面我们要用ALU&#xff08;输入二进制&#xff0c;会执行计算&#xff09;、两种…

STM32之HAL开发——ADC入门介绍

ADC简介 模数转换&#xff0c;即Analog-to-Digital Converter&#xff0c;常称ADC&#xff0c;是指将连续变量的模拟信号转换为离散的数字信号的器件&#xff0c;比如将模温度感器产生的电信号转为控制芯片能处理的数字信号0101&#xff0c;这样ADC就建立了模拟世界的传感器和…

C++异常处理实现(libstdc++)

摘要&#xff1a;为了更好的理解C中异常处理的实现&#xff0c;本文简单描述了Itanium ABI中异常处理的流程和llvm/libsdc简要实现。 关键字&#xff1a;C,exception,llvm,clang C他提供了异常处理机制来对程序中的错误进行处理&#xff0c;避免在一些异常情况下无法恢复现场而…

Android C++ 开发调试 LLDB 工具的使用

文章目录 调试环境准备基础命令Breakpoint CommandsWatchpoint CommandsExamining VariablesEvaluating ExpressionsExamining Thread StateExecutable and Shared Library Query Commands 参考&#xff1a; Android 中在进行 NDK 开发的时候&#xff0c;我们经常需要进行 C 代…

漏洞挖掘之某厂商OAuth2.0认证缺陷

0x00 前言 文章中的项目地址统一修改为: a.test.com 保护厂商也保护自己 0x01 OAuth2.0 经常出现的地方 1&#xff1a;网站登录处 2&#xff1a;社交帐号绑定处 0x02 某厂商绑定微博请求包 0x02.1 请求包1&#xff1a; Request: GET https://www.a.test.com/users/auth/weibo?…

88、动态规划-乘积最大子数组

思路&#xff1a; 首先使用递归来解&#xff0c;从0开始到N&#xff0c;每次都从index开始到N的求出最大值。然后再次递归index1到N的最大值&#xff0c;再求max。代码如下&#xff1a; // 方法一&#xff1a;使用递归方式找出最大乘积public static int maxProduct(int[] num…

局部性原理和磁盘预读

局部性原理 磁盘预读 \

Linux---软硬链接

软链接 我们先学习一下怎样创建软链接文件&#xff0c;指令格式为&#xff1a;ln -s 被链接的文件 生成的链接文件名 我们可以这样记忆&#xff1a;ln是link的简称&#xff0c;s是soft的简称。 我们在下面的图片中就是给test文件生成了一个软链接mytest&#xff1a; 我们来解…

【Linux—进程间通信】共享内存的原理、创建及使用

什么是共享内存 共享内存是一种计算机编程中的技术&#xff0c;它允许多个进程访问同一块内存区域&#xff0c;以此作为进程间通信&#xff08;IPC, Inter-Process Communication&#xff09;的一种方式。这种方式相对于管道、套接字等通信手段&#xff0c;具有更高的效率&…

【skill】onedrive的烦人问题

Onedrive的迷惑行为 安装Onedrive&#xff0c;如果勾选了同步&#xff0c;会默认把当前用户的数个文件夹&#xff08;桌面、文档、图片、下载 等等&#xff09;移动到安装时提示的那个文件夹 查看其中的一个文件的路径&#xff1a; 这样一整&#xff0c;原来的文件收到严重影…

孪生网络、匹配网络和原型网络:详解与区分

孪生网络、匹配网络和原型网络 孪生网络、匹配网络和原型网络&#xff1a;详解与区分孪生网络&#xff08;Siamese Networks&#xff09;核心概念工作原理 匹配网络&#xff08;Matching Networks&#xff09;核心概念工作原理 原型网络&#xff08;Prototypical Networks&…

环形链表知识点

目录 判断链表中是否有环快慢指针步数问题 判断链表中是否有环 题目&#xff1a;给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 解决方法&#xff1a;使用快慢指针 如果两个快慢指针相遇&#xff0c;则有环。 如果没有相遇&#xff0c;则没有环。 但是这个原理…