前端自动化开发之Node.js的环境搭建教程

一、为什么我们前端自动化开发

相信任何学开发的，不管学什么语言，老师都这样讲过，作为一名开发人员，你最大的精力应该是放在创造力上面，don't you repeat myself 不要重复自己，而在我们开发过程中，往往存在很多大量的重复操作，所以我们需要为这些操作省去时间，腾出更多的时间来让我们创造。

而自动化开发能带来哪些自动化：

1.自动编译（将less，sass等自动编译）

2.自动合并（将页面引入的多个js文件，或者CSS文件，合并为同一个且压缩）

3.自动刷新（IDE保存，浏览器不用刷新，自动看到效果）

4.自动部署（自动将项目打包部署到指定目录）

5.自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试）

有没有感觉很心动额，能够帮我们做这么多事情，所以下面我们就来搭建吧，此次搭建，包括环境搭建，工具搭建，项目架构搭建，连载，今天这篇，将环境搭建的初步，nodejs环境搭建。

二、Node.js是个什么东西？

node.js® is a javascript runtime built on Chrome's V8 JavaScript engine. 
node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. 

翻译一哈就是：Node.js是一个基于Chrome V8引擎的javascript的运行环境，其使用了事件驱动，非阻塞I/O模型，非常轻便高效，其包管理工具npm，是全球最大的开源库生态系统。

意思就是，本来浏览器在显示我们看到的网站的时候，会做很多事情，页面渲染，js渲染等等，然后node把其中js渲染的引擎拿出来，并且使用了谷歌的V8，然后在其外面又封装了一层api，让其拥有了文件读写，网络等操作，提供了一个服务端的运行环境，但却是运行的javascipt。所以说nodejs给前端开发行业带来了一场工业革命。

三、安装Node.js

安装有多种方式，，https://nodejs.org/en/ 可以直接在官网，下载安装版安装，这种方式很简单粗暴，下一步就解决，就不多介绍了，介绍另一种方式，nvm安装，因为有时我们在使用过程中，可能要用多种版本的node，而nvm可以让我们在使用过程方便的切换的使用版本。

第一步下面NVM的包，Https://GitHub.com/coreybutler/nvm-windows/releases ，我们选择第一个：nvm-noinstall.zip 下载完成后解压到一个地方，比如: C:devnvm 里面的文件列表是这样的：elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe

双击 install.cmd 然后会让你输入”压缩文件解压或拷贝到的一个绝对路径” 先不用管它，直接回车，成功后，会在C盘的根目录生成一个settings.txt的文本文件，把这个文件剪切到C:devnvm目录中，然后我们把它的内容修改成这样：

root: C:devnvm 
path: C:devnodejs 
arch: 64 
proxy: none 

然后我们开始配置环境变量了，因为刚刚点击了install.cmd的文件，那么会在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和NVM_SYMLINK 我们开始修改这两个变量名的变量值：NVM_HOME的变量值为：C:devnvm； NVM_SYMLINK的变量值为：C:devnodejs

然后我们配置PATH的环境变量，为了添加%NVM_SYMLINK%,%NVM_HOME%,

打开cmd，输入命令nvm -v看到版本信息，就说明安装成功了

然后下载nodejs，输入命令，nvm install lastest就可以下载最新版本的node，如果要指定版本，也可以nvm install 6.4.0，如果电脑是32位的，注意在后面加上32，nvm install 6.4.0 32，因为默认是64位的

四、npm的安装

我们安装的每个node版本中已经自带了一个npm，但是由于我们可能会有切换node版本的时候，这时为了统一起见，我们需要安装一个全局的npm

首先我们进入命令模式，输入 npm config set prefix "C:devnvmnpm" 回车，这是在配置npm的全局安装路径，然后在用户文件夹下会生成一个.npmrc的文件，用记事本打开后可以看到如下内容：prefix=C:devnvmnpm

然后继续在命令中输入： npm install npm -g 回车后会发现正在下载npm包，在C:devnvmnpm目录中可以看到下载中的文件，以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。

我们为这个npm配置环境变量： 变量名为：NPM_HOME，变量值为 ：C:devnvmnpm

在Path的最前面添加; %NPM_HOME%，注意了，这个一定要添加在 %NVM_SYMLINK%之前，所以我们直接把它放到Path的最前面

最后我们新打开一个命令窗口，输入npm -v ,此时我们使用的就是我们统一下载的npm包了。

同样的我们还可以安装cnpm工具，它是中国版的npm镜像库，地址在这里：https://cnpmjs.org/，也是npm官方的一个拷贝，因为我们和外界有一堵墙隔着，所以用这个国内的比较快，淘宝也弄了一个和npm一样的镜像库，http://npm.taobao.org/，它和官方的npm每隔10分钟同步一次。安装方式：

npm install -g cnpm --reGIStry=http://r.cnpmjs.org

或者用淘宝的npm install -g cnpm --registry=https://registry.npm.taoba.org

安装好了cnpm后，直接执行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是为了把包安装在全局路径下。如果不全局安装，也可以在当前目录中安装，不用-g就可以了。

五、nrm安装

什么是nrm？

nrm就是npm registry manager 也就是npm的镜像源管理工具，有时候国外资源太慢，那么我们可以用这个来切换镜像源。
我们只要通过这个命令: npm install -g nrm 就可以实现安装。

注意： -g可以直接放到install的后面，我们以后也最好这样用，因为这样用，我们可以在cmd中上下箭头切换最近命令的时候，容易修改，更方便操作。安装完成后，我们就可以使用了。

命令：nrm ls 用于展示所有可切换的镜像地址

命令：nrm use cnpm 我们这样就可以直接切换到cnpm上了。当然也可以按照上面罗列的其他内容进行切换。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程网的支持。