Window下前端环境的配置

前言

1. 每次更换新机器，如果能保持工具集的统一，符合一直以来的习惯，能增加个人快乐
2. 遇到各种报错，可尝试用管理员身份运行命令和软件

Node

为了 能在不同的项目环境中切换，需要在系统中搭建多版本共存的node环境。

第一次 在系统中搭建node时，建议直接采用下述Nvm（nvm-windows）的方式进行搭建。

非第一次 的情况下，必须先完全移除现有的node环境（核心安装包、环境变量），然后再进行Nvm搭建。

卸载已安装过的nodejs

1. 从控制面板找到卸载程序，将nodejs卸载掉
2. 重新启动（或者您可能会从任务管理器中杀死所有与节点相关的进程）
3. 找下面这些文件夹并删除它们（及其内容）（如果还有）。根据您安装的版本，UAC设置和CPU架构，这些可能或可能不存在：

C:\Program Files (x86)\Nodejs

C:\Program Files\Nodejs

C:\Users{User}\AppData\Roaming\npm（或%appdata%\npm）

C:\Users{User}\AppData\Roaming\npm-cache（或%appdata%\npm-cache）

4. 检查下%PATH%环境变量（我的电脑->右键属性->高级系统设置->环境变量），保证没有引用Nodejs或者npm
5. 如果仍然没有卸载，请where node在命令提示符下键入，您将看到它所在的位置 - 删除（也可能是父目录）
6. 可重启电脑尝试解决上述

Nvm

nvm就是nodejs version manage 叫做nodejs 版本管理。

1. 下载 nvm-windows ， 选择下载nvm-setup.zip (.exe)，解压后直接安装即可。注意下述情况：

• 问题： exit code 1、命令不能识别、提示乱码
• nvm的安装路径中不能有中文、空格和特殊字符；最好使用全英文
• (理论上初次 )使用管理员权限来运行cmd
• 可以检查nvm的setting.txt文件中的路径是否一致
• select Node Symlink: 后续会关注使用的node版本

2. 常见命令

• nvm version #查看nvm版本
• nvm (list) ls #查看已经安装的版本
• nvm ls installed #查看已经安装的版本
• nvm ls available #查看网络可以安装的版本
• nvm install || latest #安装指定版本的node
• 【这里有坑，见3； 有些node<8.11.+>版本的npm不能自动的安装】
• nvm uninstall 卸载指定版本node
• nvm use #切换使用指定的版本node
• 在安装新的nodejs和npm后，在安装某些依赖包时可能会报错，按如下解决：
• 先 npm cache clean --force，再 npm install 即可
• root、node_mirror [url]、npm_mirror [url]
• alias、on、off

3. 经过上述操作，nvm已正常可用。但会出现上述npm不能成功的情况。建议直接手动下载node版本文件，解压放到nvm的安装目录里即可。

• node文件地址1 --- node文件地址2

4. 配置node_global、node_modules路径，指定全局安装路径和缓存路径 【建议配置】

• 待成功安装node版本后，在nvm安装目录下创建"node_global"和"node_cache"两个文件夹
• 进入cmd,输入以下命令进行设置：
• npm config set prefix "D:\nvm\node_global" //设置全局模块的安装路径
• npm config set cache "D:\nvm\node_cache" //设置缓存到node_cache文件夹
• 把node_global路径加入到系统环境变量path中，方便直接使用命令行运行。
• 新增NODE_PATH，值为安装目录下的nodejs

5. 参考链接

• 1. nvm-windows安装教程
• 2. nvm安装node成功，但npm失败问题

Npm

1. 版本号

npm的版本号分三个部分：主版本号.次版本号.补丁版本号

• 主版本号： 当API发生改变，并与之前的版本不兼容的时候
• 次版本号： 当增加了功能，但是向后兼容的时候
• 补丁版本号： 当做了向后兼容的缺陷修复的时候

2. ~ 、 ^ 和 *

• ~ 会匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0
• ^ 会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0
• 什么前缀也没有，比如1.2.3，指定特定的版本
• *安装最新版本的依赖包。可能会造成版本不兼容，慎用

3. 常见命令

• npm -v：查看版本号
• npm root -g：查看全局安装模块的目录
• npm config list：查看配置信息，比如npm源等
• npm init：初始化package.json。参数-y跳过输入自动生成
• npm install：根据package.json的配置安装插件。缩写npm i
• npm i 包名：安装某包。缩写npm i 包名。

• 参数-g全局安装；
• 参数--save(缩写-S)保存到package.json的生产依赖中；
• 参数--save-dev(缩写-D)保存到package.json的开发环境依赖中

• npm update：更新。参数类似npm install。不带包名表示package.json里面的所有依赖更新
• npm uninstall：卸载。参数类似npm install。不带包名表示卸载package.json里面的所有依赖
• npm run dev：执行dev命令。dev是在package.json的scripts中配置的命令
• npm publish: 将打包好的文件上传到npm仓库中，通常需要配合package.json中的配置项
• npm install --production：只有dependencies节点下的模块会下载到node_modules目录中，devDependencies节点下的模块不会下载到node_modules目录

devDependencies节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。

这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。

像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

4. 这里就可以使用nrm来更换源的地址哦

命令大全

1. 查看npm版本

# 设置全局的npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 也可以切换回默认全局镜像
npm config set registry https://registry.npmjs.org

2. npm命令简写

-g： 为 --global 的缩写，表示安装到全局目录里
-S： 为 --save 的缩写，表示安装的包将写入package.json里面的dependencies
-D： 为 --save-dev 的缩写，表示将安装的包将写入packege.json里面的devDependencies
 i： 为install的缩写，表示安装

3. npm安装模块

npm init  # npm 初始化当前目录
npm i  # 安装所有依赖
npm i express  # 安装模块到默认dependencies
npm i express -g  # 会安装到配置的全局目录下
npm i express -S  # 安装包信息将加入到dependencies生产依赖
npm i express -D  # 安装包信息将加入到devDependencies开发依赖
npm i jquery@1.8.3  # 安装jquery指定的1.8.3版本

4. npm卸载模块

npm uninstall express  # 卸载模块，但不卸载模块留在package.json中的对应信息
npm uninstall express -g  # 卸载全局模块
npm uninstall express --save  # 卸载模块，同时卸载留在package.json中dependencies下的信息
npm uninstall express --save-dev  # 卸载模块，同时卸载留在package.json中devDependencies下的信息

5. npm更新模块

6. npm查看命令
7. npm其他命令

Nrm

nrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。

1. 选定node运行版本后，执行命令：npm install -g nrm，全局安装nrm

• 安装完成后，执行nrm ls,如果提示找不到命令，则打开nrm安装目录下cli.js,17行，将将变量NRMRC的值由path.join(process.env.HOME, '.nrmrc');改为path.join('HOME', '.nrmrc'); 之后再次尝试使用, 结果正常
• npm install -g nrm open@8.4.2 --save

2. nrm常见命令

• nrm ls #查看可选源
• nrm add <registry名称> <url地址> #添加源
• nrm use <registry名称> #切换源
• nrm del <registry名称> #删除源
• nrm test <registry名称> #测试源速度 (响应时间)

Git

......