前端⾃动化准备和详细配置（NVM、NPMCNPM、NodeJs、
NRM、WebPack、G。。。
⼀. 各类概念和指令介绍
1. NVM
(1).  全称：Node Version Manager，是⼀款针对Nodejs的版本管理⼯具，由于Node的版本很多，很多时候我要需要依赖多个版本，并且要求可以⾃动切换，这个时候采⽤NVM来管理Node再合适不过了。
(3). 常⽤指令：
  a. 查看已经安装的node版本：【nvm list】
  b. 更换当前node的版本：【nvm  use 版本号】
  c.  安装指定版本的node：【nvm  install 版本号】（nvm install stable  特指安装最新最稳的node版本      nvm install latest  特指下载最新的node版本）
  d.  删除指定版本的node：【nvm  uninstall 版本号】
  其它指令：
(4). NVM⾃⾝版本如何更新：
    NVM总共就5个⽂件，直接复制到原⽂件夹下，覆盖即可。
2. Node.JS
  (1). ⼀个JS的运⾏环境
  (2). 主要⽤于开发Web应⽤程序
  (3). 很多的前端开发⼯具都是基于node这个平台
  (4). 所⽤的⼯具就相当于⼀些软件
  PS：
    Node.js 是⼀个基于 Chrome V8 引擎的 JavaScript 运⾏环境，Node.js 使⽤了⼀个事件驱动、⾮阻塞式 I/O 的模型，使其轻量⼜⾼效。
    Node.js 的包管理器 npm，是全球最⼤的开源库⽣态系统。
    Node.js的版本管理器为nvm。
3. NPM
  NPM（node package manager），是Node.js的包管理器，是全球最⼤的开源⽣态库。
npm管理包⾮常⽅便，我们只需要记住使⽤哪个包就可以了，类似于.Net平台下的Nuget。
4. CNPM
  安装好了cnpm后，直接执⾏：cnpm install 包名
  ⽐如：cnpm install bower -g就可以了。-g只是为了把包安装在全局路径下。如果不全局安装，也可以在当前⽬录中安装，不⽤-g就可以了。
注意：cnpm的下载路径按照上述指令安装的话，默认就是从taobao的地址下载，和通过nrm切换npm的下载源到taobao，此时npm和cnpm 的下载源是相同的，下载速度也是⼀致的。
5. NRM
  nrm就是npm registry manager 也就是npm的镜像源管理⼯具，有时候国外资源太慢，那么我们可以⽤
这个来切换下载的镜像源。
我们只要通过这个命令: 【npm install -g nrm】就可以实现安装。
注意：-g可以直接放到install的后⾯，我们以后也最好这样⽤，因为这样⽤，我们可以在cmd中上下箭头切换最近命令的时候，容易修改，更⽅便操作。安装完成后，我们就可以使⽤了。
  命令：【nrm ls】⽤于展⽰所有可切换的镜像地址
  命令：【nrm use taobao】我们这样就可以直接切换到taobao上了，和上述的cnpm就⼀致了。当然也可以按照上⾯罗列的其他内容进⾏切换。
6. WebPack
  WebPack可以看做是模块打包机：它做的事情是，分析你的项⽬结构，到JavaScript模块以及其它的⼀些浏览器不能直接运⾏的拓展语⾔（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使⽤。
  Webpack的⼯作⽅式是：把你的项⽬当做⼀个整体，通过⼀个给定的主⽂件（如：index.js），Webpack将从这个⽂件开始到你的项⽬的所有依赖⽂件，使⽤loaders处理它们，最后打包为⼀个（或多个）浏览器可识别的JavaScript⽂件。
7. Gulp/Grunt
  Grunt和Gulp的⼯作⽅式是：在⼀个配置⽂件中，指明对某些⽂件进⾏类似编译，组合，压缩等任务的具体步骤，⼯具之后可以⾃动替你完成这些任务。
8. Git/SVN
  代码、⽂件等版本管理⼯具。
⼆. 安装步骤(两套安装⽅案)
⽅案⼀：严格按照顺序进⾏安装配置
(⼀). 安装NVM的详细步骤
(1). 在C盘⽬录下建⼀个Develop⽂件夹，该⽂件⽤来存放各种与开发相关的配置。
(2). 在Develop⽂件夹中新建nvm⽂件夹，并将下载的nvm五个⽂件拷贝进去。
注意：下载免安装版本的，不要下载exe安装程序。
(3). cmd命令测试是否安装成功。
输⼊指令：【nvm -v 】，发现并不能⽤。原因是还没有配置环境变量。
(4).  配置环境变量
NVM_HOME=C:\Develop\nvm
PATH=%NVM_HOME%;
如图所⽰：
然后通过命令测试：
发现：并没有成功，原因是 nvm 的根⽬录下缺少⼀个配置⽂件。
(5). 动态⽣成配置⽂件
（有现成的可以直接拷贝进去，这⾥介绍⼀种动态⽣成的⽅式）。
双击：d命令，然后把当前路径拷贝进去，点击回车，会⾃动在当前⽬录下⽣成 ⽂件。
重新cmd 输⼊指令【nvm -v】，发现⼤功告成。
下⾯我们测试⼀下nodejs环境，指令【nvm list】，发现并没有安装。
(⼆). 安装Node.js
(1). 直接输⼊指令【nvm install latest】，安装最新版本的node。
特别注意：备注：如果你的电脑系统是32 位的，那么在下载nodejs版本的时候，⼀定要指明 32 如：【nvm install 5.11.0 32】这样在32位的电脑系统中，才可以使⽤，默认是64位的。
  这个时候发现⼀个现象，下载完最新的nodejs版后，⾃动去下载最新的npm了，这个现象很正常，在每个版本的nodejs中，都会⾃带npm，为了统⼀起见，我们安装⼀个全局的npm⼯具，这个操作很有必要，因为我们需要安装⼀些全局的其他包，不会因为切换node版本造成原来下载过的包不可⽤。
  为了后⾯演⽰切换⽅便，我们这⾥再安装另外⼀个node的版本指令【node install 6.2.0】。
　同样的现象，安装完node后，会⾃动下载该版本的node对应npm包。
(2). 配置node的环境变量
【这⾥先补充⼀个知识点：nvm切换node版本的原理，会在nvm的同级⽬录下⽣成⼀个nodejs的快捷⽅式，当前使⽤哪个版本的node，该快捷⽅式就会执⾏nvm⽂件夹⾥的对应版本的node】
基于以上原理，配置nodejs环境变量的时候，指向的是该快捷⽅式，这样⽆论怎么切换node版本，环境变量都不需要改，都可以直接对应。
A：配置NVM⽂件夹下的配置⽂件。
B：配置系统环境变量。
  NVM_SYMLINK=C:\Develop\nodejs
  PATH=%NVM_SYMLINK%;
(3) . 查看已经安装的node版本，并选择指定版本来使⽤。
  查看已经安装的node版本，指令【node list】
  选择8.5.0版本进⾏使⽤，指令【node use 8.5.0】
　再输⼊该命令之前，观察⼀个现象，Develop⽬录下只有nvm⼀个⽂件夹。
执⾏该命令。
　发现Develop⽬录下多了⼀个nodejs的快捷⽅式【正是通过该快捷⽅式来映射nvm⽂件夹⾥对应的node版本，同时node的环境变量也是对应该快捷⽅式】
　再次查看使⽤版本【nvm list】，发现8.5.0正在使⽤中
(三).  设置npm全局的下载路径，并且安装全局的
　我们在前⾯提到，每安装⼀个node版本，都会安装与其对应的npm包，在这⾥我们切换node版本，然后查看对应的npm版本来测试⼀下。
　既然我们已经装了多个不同版本的npm了（每个版本的node对应⼀个版本的npm），那么我们为什么还要安装⼀个全局的npm包呢？
【⾸先我们先补充⼀个知识：通过npm下载下来的其他程序包都是存放在" node_modules "⽂件夹下，⽽每个node下的npm都对应⼀个" node_modules "⽂件夹，但我们再实际开发中，通常需要下载⼀些程序包，这些程序包要是全局的，不能因为切换node版本⽽导致该程序包不可⽤】chrome直接下载
　所以我们下⾯的思路借助已有的npm，来下载安装⼀个全局的npm。
(1). 配置NPM的全局安装路径
　进⼊cmd命令，输⼊【npm config set prefix "C:\Develop\npm"】回车，这是在配置npm的全局安装路径，然后在⽤户⽂件夹下会⽣成⼀
个.npmrc的⽂件，⽤记事本打开后可以看到如下内容：
⽤记事本打开：并新增全局npm缓存的配置路径，如下图。
(2). 通过命令【npm install  -g npm】，下载全局的npm包  (下载不下来，先放到后⾯)
(3) . 配置npm的环境变量
NPM_Home=C:\Develop\npm
PATH=%NPM_Home%;
(4). 安装nrm
通过命令：【npm install -g nrm】全局安装nrm
【nrm ls】，展⽰所有镜像的地址。
切换npm的下载源头。【nrm use taobao】
重新全局安装npm，【npm install -g npm】
特别注意：在这⾥下载完后，⽆论node版本怎么切换，npm的版本始终是全局的npm的： 5.4.2版本
特别注意：通过nrm的指令【nrm use taobao】，将npm的下载源头切换到taobao，此时实际上和下⾯要安装cnpm下载是⼀个道理的，说⽩了，切换后的npm，就没有必要安装cnpm了。
　这⾥再补充⼀种⽅式，来切换npm的下载路径（可以不⽤安装nrm）
【 npm config set registry registry.】，该指令与前⾯“配置npm的全局安装路径类似”，都是操控的 .npmrc⽂件。
（四）全局安装cnpm
查看安装是否成功【cnpm -v】
⽅案⼆. 直接官⽹下载NodeJS安装包，简单粗暴型
1. 官⽹下载Node.js的msi安装包，直接下⼀步安装。
  安装过程⾮常简单，直接下⼀步、下⼀步、⼀路到底。
  建议：安装路径根据⾃⼰的需要适当改⼀下。
  特别注意：选择安装项的这⼀步，要不npm和add path(⾃动配置环境变量)，这两个选项给勾上。
2. 校验安装成果。
  A：发现nodejs和npm可以正常使⽤
    B：发现在⽤户变量和系统变量的path中各⾃多了⼀条记录。
  C：测试全局下载【npm install -g bootstarp】。将下载到该路径下：C:\Users\Administrator\AppData\Roaming\npm\node_modules
3. 该种安装⽅式总结。
  不利于nodejs的版本管理，⽆法⾃动切换或更新nodejs的版本。
  全局下载路径需要⾃⼰重新配置，默认的路径，有点坑爹，不好。
  默认是没有安装nrm或cnpm的，需要⾃⼰重新切换下载源，默认是国外的。
最后建议：⽣命在于折腾，建议采⽤⽅案⼀的⽅式进⾏配置，对每⼀步的作⽤做到⼼中有数。
三. npm或cnpm使⽤
这⾥以cnpm的指令来介绍，npm的使⽤只需将指令中的cnpm改为npm即可。【⼿动将npm的下载源切换到taobao，实际上和cnpm⼀样了】
  1. 将npm更新到最新版本：【npm install -g npm】
  2. 将cnpm更新到最新版本：【cnpm install -g cnpm】
  3. 安装其它程序包：【cnpm install xxx】会在当前路径上⽣成⼀个"node-modules"，并将xx程序下载到该⽂件夹下。
  eg ：新建⼀个⽂件夹，在该⽂件夹下打开cmd命令，输⼊指令：【cnpm install  bootstrap 】
　删除其它程序包：【cnpm uninstall xxx】
  4. 安装其它程序到全局npm路径下：【cnpm install -g xx】
  　删除其它全局程序包：【cnpm uninstall -g xx】
  5. 补充知识点：项⽬依赖
  A: 普通项⽬依赖：
    【npm init】：⽣成⼀个package.json⽂件，⽤来记录项⽬需要依赖哪些东西。
  【npm install xx --save】：对应的是 package.json ⽂件 dependencies，该节点表⽰发布之后还需要依赖的东西。（eg：JQuery，发布之后，仍然需要依赖JQuery库）
  【npm install xx --save-dev】：对应的是package.json ⽂件 devDependencies，该节点表⽰开发阶段需要依赖的东西。（eg：grunt、bable类似的⼯具类，只在开发阶段使⽤）
【npm install】：默认还原的是package.json下dependencies和devDependencies两个节点下的所有依赖库。
B：全局依赖：特指你要安装⼀个⼯具包，系统中任何位置都可能⽤到，这种情况下⼀版要全局安装。
指令：【cnpm install -g xx】
6.  全局npm版本更新
　【npm install -g npm】，时间有点长，⼤约需要两分钟

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。