【前端工程化】篇一 扬帆起航：开发环境

字数：2262， 阅读时间：6分钟，点击阅读原文

雄关漫道真如铁，而今迈步从头越。 ——毛泽东《忆秦娥·娄山关》

前言

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

虽然是个笑话，但是说得非常有道理的。人类从以前的石器时代到现在的信息科技时代，汽车代替了马车，手机代替了书信，计算器代替了结绳计数，这不正是一个工具迭代的过程吗？固古有名言“工欲善其事，必先利其器”，可见工具在我们生活中扮演着一个重要的角色。

前端发展到今天，早已脱离了刀耕火种，新时代的前端一定要学会使用工具来提高开发效率。

工程化的概念其实很久之前就诞生了，不过由于技术的限制，前端并没有合适的工具可用。nodejs的出现，开启了前端工程化的篇章，一大波的构建工具如雨后春笋，先是grunt盛极一时，随后gulp凭着简洁的api和超快的构建速度将grunt踩在脚下，再后来webpack出现了，和之前的构建工具不同，它更加关心模块及其依赖关系，拥有强大的扩展能力，一时间受到了广大开发者的追捧，虽然后来parcel的出现也引起了不小的轰动，但终未掀起大风浪，webpack依旧稳坐王座，大有一统天下之势。

现在前端的构建工具体系已经非常成熟和完善，用好这些工具，不仅可以少掉几根头发，还可以打打王者、泡泡妹子（如果你有的话）......

前端工程化即将前端开发流程自动化、规范化、工具化、智能化，通过规范和工具来提升应用质量，提高开发效率。

此系列文章主要是对前端工程化方面的知识做个梳理，由于作者能力有限，所以并不能完全保证知识的完备性和正确性，如有不足之处，敬请指正。

内容安排如下（后期可能会不定时更新）：

开发环境

千里之行，始于足下，我们就以搭建开发环境作为这系列的开篇吧。当然，由于每个人的操作系统、使用习惯都不一样，内容仅做参考。

NVM

nvm全称Node Version Manager，是 Nodejs 的版本管理器。由于有些老项目使用了较低版本的nodejs，版本之间的兼容性问题又不能让你轻易升级，而新的项目又需要使用新的版本，这就需要一个方便进行Nodejs版本切换的工具，这即是nvm的工作（类似的工具还有n，这里只介绍nvm）。

nvm的官方版本只支持Linux和 Mac。 Windows用户，可以用nvm-windows。详情请查看官方说明。

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

安装和使用

1. 下载nvm包。下载地址：nvm-windows下载，选择nvm-setup.zip下载完成后进行安装，建议安装到一个特定的目录中，后续所有其他开发工具也会安装到此目录中，这里我安装到D:\development\nvm
2. 安装成功后，可以设置一下node和npm的安装源，换成淘宝的要快一些：

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

也可以自己在安装目录下的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使用的镜像源，设置成淘宝的比较快

1. 设置环境变量，正常情况下会在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和 NVM_SYMLINK ,确保这两个变量存在且NVM_HOME的变量值为：D:\development\nvm ； NVM_SYMLINK的变量值为：D:\development\nodejs,然后在Path中确保引用了这两个环境变量，如 %NVM_HOME%和%NVM_SYMLINK%
2. 在终端输入命令：nvm version ，查看当前nvm的版本信息。如果正常显示版本号，说明安装成功，否则需要检查以上安装配置是否正确。
3. 继续输入命令：nvm install latest, 如果网络畅通，会看到正在下载的提示，即会安装最新版本的node。
4. 如果是第一次下载，在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"  ## 设置全局模块安装目录
npm config set registry https://registry.npm.taobao.org  ## 设置镜像为淘宝
npm config set cache "D:\development\npm_cache" ## 设置缓存目录，默认会在C盘，可以修改到其他盘

可以查看用户目录下的.npmrc文件是否包含如下内容，确认是否设置成功。

prefix=D:\development\npm
registry=https://registry.npm.taobao.org

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

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

NRM

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

1. 全局安装nrm：npm install -g nrm
2. 安装后就可以使用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/

1. 选择需要的源：

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包版本的，支持全局模块和项目中的模块，具体可查看官方文档

1. 安装：npm i-g npm-check

2. 检查包: npm-check -g -u，

   说明：

   • -g（--global）参数表示更新全局模块，同理还可以是-p(dependencies依赖)，-d（devDependencies依赖）设置检查范围
   • -u（--update）参数表示检查有更新的模块

1. 从列出有更新的包列表中，按空格进行选择，按上下方向键进行光标移动，按回车将更新所有选择项。

其他用法：

npm update <name> -g # 更新某个全局包
npm update -s # 跳过没有使用的包

终端美化

作为一个颜控来说，一个好看的终端是非常重要的。先贴下战果：包含界面美化、git信息、自动补全和命令提示。

由于这部分内容比较简单，且网上教程较多，就偷个懒直接贴教程地址。

• windows教程：在 Windows 终端中设置 Powerline

  使用了WindowsTerminal+PowerShell，可以设置毛玻璃效果和背景，同时除了界面美化外，还有命令提示及Git信息，当然也可以将windows terminal添加到右键菜单中，替换掉默认的powerShell。

• Mac教程：Mac下终端工具iTerm2安装，iTerm2 + ohmyzsh + powerlevel9k + tmux 打造专属个性化终端

  

  其实上面这些都使用了ohmyz这个东西，它支持很多平台，所以其他的系统也是可以的。

结语

开发环境搭建这块没有最佳实践，符合自己的使用习惯，简单实用就好。这里仅记录一下，方便以后在需要重新搭建环境的时候参考。