前言
在前端工程化中,node扮演着一个非常重要的角色,nodejs的诞生使得前端不再停留在写静态页面和切图等工作,相继带来的前端工程化生态也因此变得活跃繁荣起来,而在我们日常的前端开发中,已经是离不开这些node版本和npm包管理,这里写一下日常开发中的这些版本管理和包管理。
诉求
- 前端开发中经常会参与不同的项目,不同项目中可能使用不同的node版本,所以需要在自己的开发环境下能够切换使用不同的node版本来满足开发的诉求
- 能够在运行项目的时候就直接使用默认的node版本,减少团队成员的上手成本,减少频繁的切换node版本带来的无效输出
- 抹平不同包管理工具的安装结果的差异
- 包管理镜像源指定,减少因为某些网络问题带来的安装上的麻烦
node版本管理
笔者使用过的node版本管理工具主要是下面这两种
两者的区别在于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