前端工程化学习（一）—— node版本管理及包管理

前言

在前端工程化中，node扮演着一个很是重要的角色，nodejs的诞生使得前端再也不停留在写静态页面和切图等工做，相继带来的前端工程化生态也所以变得活跃繁荣起来，而在咱们平常的前端开发中，已是离不开这些node版本和npm包管理，这里写一下平常开发中的这些版本管理和包管理。

诉求

• 前端开发中常常会参与不一样的项目，不一样项目中可能使用不一样的node版本，因此须要在本身的开发环境下可以切换使用不一样的node版原本知足开发的诉求
• 可以在运行项目的时候就直接使用默认的node版本，减小团队成员的上手成本，减小频繁的切换node版本带来的无效输出
• 抹平不一样包管理工具的安装结果的差别
• 包管理镜像源指定，减小由于某些网络问题带来的安装上的麻烦

node版本管理

笔者使用过的node版本管理工具主要是下面这两种

• nvm
• n

二者的区别在于n是一个npm包，安装以前本身的环境下必需要先安装好node,nvm则没必要，另一个是n不支持window，nvm则支持在Mac和window下使用。还有一个使用上的差别是笔者碰到的，不知道其余同窗有没有经历过，用n的话全局的node版本都会切换，也就是使用terminal打开了多个窗口，使用n的话不一样的窗口的node版本都会跟着切换，而nvm则能够在不一样的窗口下保持不一样的node版本，这样能够知足同时启动不一样node版本的项目。因此在实际开发中笔者和团队基本上都是使用的nvm

nvm安装及使用

这个安装由于网路问题会有点麻烦，笔者在公司网络代理下使用curl安装是很是顺利的，可是在本身的网络下就会相对麻烦一点，github的一些相关资源访问不到，因此安装起来特别麻烦

若是各位同窗网络比较好的话能够安装nvm官方github上面提供的安装方式，例如curl或者wget，注意看本身的shell是用的什么，笔者是用的zsh，因此最后面指定用了zsh

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | zsh
复制代码

若是是本身网络并且网络不是很好的话，能够考虑用国内的一些镜像，笔者在本身的电脑上是参考了 这个
经常使用命令以下

nvm install ## 安装指定版本，可模糊安装，如：安装v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2
nvm uninstall ## 删除已安装的指定版本，语法与install相似
nvm use ## 切换使用指定的版本node
nvm ls ## 列出全部安装的版本
nvm ls-remote ## 列出因此远程服务器的版本（官方node version list）
nvm current ## 显示当前的版本
nvm alias ## 给不一样的版本号添加别名
nvm unalias ## 删除已定义的别名
nvm reinstall-packages ## 在当前版本node环境下，从新全局安装指定版本号的npm包
复制代码

运行项目的时候指定node版本，当使用nvm的时候，在不一样项目根目录下咱们能够建立一个.nvmrc的文件，指定该项目使用的node版本，这样运行的时候就会自动切换到指定的版本,例如这样

lts/erbium
复制代码

包管理

包管理工具市面上有好几种，笔者接触过的有这下面三种，具体使用哪种看团队和项目的具体状况

• npm
• yarn
• pnpm

在项目开发的时候咱们会安装一些包，或者指定一些公司内部的镜像，或者经过指定一些国内的镜像来达到加速安装的效果，这时候咱们能够在项目的根路径下车间.npmrc文件或者.yarnrc文件，在这些文件里面指定registry和镜像源或者是一些cdn地址，笔者接触到的项目中为了知足不一样的包管理工具，因此同时都加上了.npmrc和.yarnrc

资源管理

平时开发的时候会使用多个npm源，例如为了加速使用国内淘宝的源，或者公司内部有本身的源，能够指定使用，这里可使用nrm(npm registry manager)来快速切换npm源，或者同上面那样在rc文件中指定好registry

nrm经常使用命令

npm install -g nrm  ## nrm 安装
nrm ls ## 列出可用的源
nrm use taobao ## 选择国内淘宝的源
nrm test npm ## 测试速度
nrm add taobao http://192.168.10.127:8081/repository/npm-public/ ##  添加源
nrm del taobao ## 删除对应的源
复制代码

npx的使用

npx是npm v5.2.0引入的一条命令，会帮你执行依赖包里的二进制文件，该命令的目的是为了提供开发者使用包内提供的命令行工具的体验
简单举个例子，以咱们比较熟悉的create-react-app这个举例子，按以前的方式咱们必须全局安装create-react-app,而后才能使用这个脚手架执行对应的命令，并且须要用到新版本的脚手架的时候只能经过更新全局的这个包来实现升级。

npm install -g create-react-app
create-react-app my-app
复制代码

使用了npx以后，咱们不须要全局安装这个就能够直接使用

npx create-react-app my-app
复制代码