Vue组件库系列-环境配置(一)

NVM for Windows

NVM 是 Node Version Manager 的缩写。这是一个管理node的工具，可以实现同时安装多个版本的node并且可以来回切换，方便测试npm包在不同node版本下的表现。

安装

安装非常简单粗暴，下载 nvm-windows 安装包，傻瓜式安装即可。根据官方说明，安装前需要删除本机已经安装的node/npm。

Uninstall any existing versions of Node.js before installing NVM for Windows (otherwise you'll have conflicting versions). Delete any existing Node.js installation directories (e.g., "C:Program Files odejs") that might remain. NVM's generated symlink will not overwrite an existing (even empty) installation directory.

Delete the existing npm install location (e.g. "C:Users<user>AppDataRoaming pm") to prevent global module conflicts. Remember to backup any global npmrc config (e.g. C:Users<user>AppDataRoaming pmetc pmrc), or copy the settings to the user config C:Users<user>.npmrc.

这是NVM安装目录，后面下载的各种版本的node就是会在这里了。

这其实是一个文件夹的快捷方式，指向当前使用的node版本，用来切换node版本用的。

然后测试下是否安装成功

常用指令

# 列出所有安装的node版本，带*号的是当前正在使用的
nvm list

# 列出所有可以安装的node版本
nvm list available

# 安装指定的node版本
nvm install <xx.xx.xx>

# 切换到指定的node版本
nvm use <xx.xx.xx>

# 卸载指定的node版本
nvm uninstall <xx.xx.xx>

镜像配置

由于网络或者是墙的原因导致使用nvm下载node和npm很慢甚至失败，例如

不如试试淘宝镜像吧。

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

Node/NPM

nvm安装配置已经完成，可以开始安装node/npm了。

安装最新LTS版本

安装最新的LTS版本的node，npm也会随着一起安装。

nvm list available

nvm install 14.16.0

然后使用它

nvm use 14.16.0
nvm list
node -v
npm -v

配置

NPM全局位置

先来看看npm默认的缓存路径和全局安装的路径

npm config get prefix
npm config get cache

可以看到全局包是存放在nvm-nodejs下的，它其实指向的是我的D: vm下的每个node版本的目录，当我们切换不同版本的时候指向不同的目录。

这就会带来一个问题，就是在切换不同node版本的时候全局包会丢失，或者说当你下载一个新的node版本时，之前安装的全局包就没有了，除非全部重新安装一遍。

所以为了解决这个问题，我们可以重新指定一下prefix路径，cache可以保留，下面是我的设置

npm config set cache D:
vm
ode_cache
npm config set prefix D:
vm
ode_global

现在试着全局安装一个cnpm看看，不出意外的话相关的包文件都应该在D: vm ode_global下面。

现在执行cnpm发现没有这个命令

那是因为我们需要把这个全局路径添加到系统环境变量PATH中去，所以创建系统变量NPM_GLOBAL（其实名字随便），然后添加到PATH中

现在切换node版本，然后再试试，依然可以使用

NPM镜像

到这里node和npm其实已经安装完成了，接下来可以开始下载项目需要的各种包了。但是还是因为网络和墙的原因导致下载npm包时很慢或者失败，所有通常的做法是换个镜像（下载源）或者使用 cnpm。

首先来看看默认的registry是什么

npm config get registry

可以换成淘宝镜像

npm config set registry https://registry.npm.taobao.org

也可以临时替换成淘宝镜像，例如用淘宝镜像来下载yarn包

npm install -g yarn --registry=https://registry.npm.taobao.org

NRM

NRM 是 NPM Registry Manager 的缩写。用来管理npm各种镜像用的，也许你需要经常在几个源之间切换，比如用淘宝源下载包，用npm官方的源或者公司自己的源来发布包，那使用nrm还是比较方便的。

下载 nrm 模块

npm i -g nrm

NOTE: 高版本的node可能会导致nrm无法使用，至少我测试的14.15.0和14.16.0都遇到了，nrm官方有个解决方案，可以自行解决

常用命令

# 列出所有源
nrm ls

# 切换源
nrm use taobao

# 添加源
nrm add <源名字> <源地址>

# 删除源
nrm del <源名字>

其他镜像

虽然自己暂时还没有遇到，但是这里还是先mark一下。[详细请参考: 聊聊NPM镜像那些险象环生的坑]

# 查看Node版本和NPM版本确认已安装Node环境
node -v
npm -v

# 安装nrm并设置NPM的淘宝镜像
npm i -g nrm
nrm use taobao

# 设置依赖安装过程中内部模块下载Node的淘宝镜像
npm config set disturl https://npm.taobao.org/mirrors/node/

# 设置常用模块的淘宝镜像
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set puppeteer_download_host https://npm.taobao.org/mirrors/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/
npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/
npm config set python_mirror https://npm.taobao.org/mirrors/python/

针对node-sass的情况：

# 安装rimraf并设置package.json
npm i -g rimraf

# 安装前请确保当前的Node版本和node-sass版本已兼容

# 安装失败
npm cache clean -f
npm rebuild node-sass 或 npm run reinstall
package.json中加入npm scripts：

{
  "scripts": {
    "reinstall": "rimraf node_modules && npm i"
  }
}

VUE CLI

npm i -g @vue/cli

用了淘宝源还是失败了，最后还是用了cnpm 给装上了

总结

好了，这就是我目前的环境配置，确切地说应该是node环境的配置。

nvm 管理不同版本的node。配置下载node和npm的镜像通常还是用的到的。

nrm 管理npm镜像，就是管理npm包从哪里下载。

cnpm 是一个npm包，直接从淘宝镜像下载包，网络问题通常能解决。

@vue/cli 是vue的脚手架，全局安装方便创建vue项目。

还有就是npm下载的全局路径和缓存路径自定义，建议自己设置一下，起码自己知道全局包都在什么地方。