字数：1913，阅读时间：5分钟，点击阅读原文
目录：

前言

老丈人爱吃核桃，昨天买了点陪媳妇儿送去，老丈人年轻时练过武，用手一拍核桃就碎了，笑着对我说：“你还用锤子，你看我用手就成”。我嘴一抽，来了句：“人和动物最大的区别就是人会使用工具”。……。

虽然是个笑话，但是我觉得还是非常有道理的，人类从最初的石器时代到现在的科技时代，本质都是工具的提升，固古人才有“工欲善其事，必先利其器”的至理名言。

前端发展到现在，早已脱离了刀耕火种的时代，新时代的前端要使用工具来提高我们的开发效率。

工程化的概念很久之前就诞生了，但是因为nodejs的出现，让前端工程化的正式兴起，一大波的构建工具如雨后春笋，先是grunt盛极一时，然后gulp凭着简洁的api和超快的构建速度将grunt踩在脚下，随后webpack出现了，和之前的构建工具不同，webpack不关心文件，只关心模块及其依赖，它受到了广大开发者的追捧，虽然后来parcel的出现也引起了不小的轰动，但终究是昙花一下，webpack大有一统天下之势。

现在构建工具已经非常成熟，也非常完备，我们何不合理用之，把多余的时间留给王者、留给妹子、留给春花雪月......

分享这系列的文章一是梳理一下相关的知识以做巩固，二是团队分享使用，如有错误之处，欢迎指正。

整个内容安排如下：

开发环境

千里之行，始于足下，为了保证后续的内容能够顺利进行，我们首先来搭建一套开发环境。当然，如果在实际的开发中也是建议使用的，如果一个团队中，大家都使用了相同的开发环境，我相信在寻求别人帮助的时候，就能免除环境的干扰。

接下来，我们就开始吧！

NVM

nvm全称Node Version Manager，是 Nodejs 版本管理器，可以对Nodejs的版本进行切换。类似的工具还有n，这里只介绍nvm。 nvm的官方版本只支持Linux和 Mac。 Windows用户，可以用nvm-windows。详情请查看官方说明。

在使用nvm安装node之前，请确保之前安装的nodejs已卸载，以免冲突。

安装和使用

下载nvm包。下载地址：nvm-windows下载，选择nvm-setup.zip下载完成后进行安装，建议安装到一个特定的目录中，后续我们的所有其他开发工具也会安装到此目录中，这里我安装到D:\development\nvm
安装成功后，会在C盘的根目录或者安装目录生成一个settings.txt文件，然后按照如下内容做修改：

  root: D:\development\nvm         
  path: D:\development\nodejs 
  arch: 64                    
  proxy: none                                    
  node_mirror: http://npm.taobao.org/mirrors/node/ 
  npm_mirror: https://npm.taobao.org/mirrors/npm/

root:设置nvm目录
path:设置nodejs安装目录
arch:架构，64位或者32位
proxy：代理
node_mirror：安装node使用的镜像源，设置成淘宝的比较快
npm_mirror：安装npm使用的镜像源，设置成淘宝的比较快```

设置环境变量，正常情况下会在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和 NVM_SYMLINK ,确保这两个变量存在且NVM_HOME的变量值为：D:\development\nvm ； NVM_SYMLINK的变量值为：D:\development\nodejs,然后在Path中确保引用了这两个环境变量，如 ;%NVM_HOME%和;%NVM_SYMLINK%;
在终端输入命令：nvm version ，查看当前nvm的版本信息。如果正常显示版本号，就可以安装nodejs了，否则需要检查以上安装配置是否正确。
继续输入命令：nvm install latest, 如果网络畅通，会看到正在下载的提示，即会安装最新版本的node。
如果是第一次下载，在use之前，D:\development目录下是没有nodejs这个文件夹的，在输入比如： nvm use 12.16.0 之后，在D:\development目录下便会创建一个nodejs文件夹，这个文件夹是一个快捷方式，指向了D:\development\nvm 里的v12.16.0文件夹。
如果是Mac用户的话，直接使用Homebrew进行安装就好，也可以参考官方说明进行安装。

常用命令

nvm install # 安装指定版本，可模糊安装，如：安装v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2
nvm uninstall # 删除已安装的指定版本，语法与install类似
nvm use # 切换使用指定的版本node
nvm ls # 列出本地所有安装的版本

NPM配置

在上面，如果我们用nvm安装了nodejs，那么同时也会安装npm。如果我们希望npm安装的全局包也放在D:\development下，那我们可以执行以下命令：

npm config set prefix "D:\development\npm"

可以查看用户目录下的.npmrc文件是否包含内容prefix=D:\development\npm。

另外，需要在系统环境变量配置NPM_HOME，变量值为D:\development\npm,然后在Path中引用该变量;%NPM_HOME%;,需要确保放在%NVM_SYMLINK%前面。

此时，如果你安装一个全局模块的话，就会被安装到上面设置的目录中了。

NRM

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

全局安装nrm：npm install -g nrm
安装后就可以使用nrm的相关功能，列出可使用的资源：nrm ls，会显示如下内容：

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

选择淘宝的源：nrm use taobao

现在nrm切换源不仅可以作用于npm，而且yarn也是有效的。当然还有些其他方案，比如用cnpm代替npm，个人是不建议这样做的，因为有时候会出现一些奇怪的问题。

另外，如果在我们开发中，发现某些模块安装总是失败或者很慢，如node-sass、electron、chrom等，我们可以手动将安装源设置为淘宝的地址：
- 打开用户目录的.npmrc
- 加入要设置的源
```
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"=true
electron_mirror "https://npm.taobao.org/mirrors/electron/"=true
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"=true
```

其他模块的地址请自行在淘宝npm镜像中查找

NPM-CHECK

这个工具我主要是用来更新全局模块的，当然它的功能不止如此，类似的工具也有很多，我这不赘述，只演示以下如何更新全局模块，具体可查看官方文档

安装：npm i-g npm-check
更新: npm-check -g -u，-g参数标识全局,-u即--update标识更新

此时，会列出有更新的模块，按空格进行选择，按上下方向键进行移动光标，按回车将更新选择项。

（前端工程化00）磨刀篇-开发环境搭建

前言

开发环境

NVM

安装和使用

常用命令

NPM配置

NRM

NPM-CHECK

你可能感兴趣的:(npm,webpack,gulp,babel,eslint)