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

字数：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标识更新

  

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