node.js开发环境搭建(Windows系统)

nvm环境搭建

• nvm是node的版本控制器，可以管理多个不同的版本的node，node的所有版本可以在这里查看。nvm下载传送门,跳转之后找到
  Paste_Image.png 下载对应的版本，目前最新的是1.1.3版本，沿袭传统，一般下载次最新版本（此处下载了1.1.3版本）

Paste_Image.png

解压安装

Paste_Image.png Paste_Image.png

注意这里，可以选择默认的（不需要配置环境变量），也可以自己选择路径，但是要注意不要在路径中出现空格和汉字，否则会有异常。同时要配置环境变量，否则后期使用nvm命令会出现不是内部或外部命令，也不是可运行的程序或批处理文件。
以下默认以默认安装方式来说明

Paste_Image.png

安装完成nvm之后，可以打开cmd，输入nvm，出现如下界面说明安装成功

Paste_Image.png

安装npm

npm 是管理node.js 第三方插件的一个工具,每个npm都是独立的，在不同的版本的npm上安装的插件并不会影响到其他版本的npm,常用的使用场景有以下几种

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

直接输入nvm install 版本号 64/32 默认64位操作系统，如果是32位操作系统需要加上后面的32.直接输入之后会发现如下问题，无法获取到对应的资源。以6.9.2为例，nvm install 6.9.2 64

Paste_Image.png

此时，可以开启代理翻墙或者设置对应的国内镜像站点，此处以淘宝镜像站点举例（https://npm.taobao.org/）
两个方法：

• 如果是1.1.2版本（虽然也有命令提示，但是并没有做完,并不能生效），需要在默认路径下C:\Users\ADV\AppData\Roaming\nvm，找到settings.txt,并打开，在文本的最后一行上加入如下代码
  node_mirror: https://npm.taobao.org/mirrors/node/
  npm_mirror: https://npm.taobao.org/mirrors/npm/
• 如果是1.1.3，命令行直接指定npm_mirror
  nvm node_mirror https://npm.taobao.org/mirrors/node/
  nvm npm_mirror https://npm.taobao.org/mirrors/npm/
  然后关闭并重新打开cmd，比如使用nvm install 6.9.2 64

Paste_Image.png Paste_Image.png

之前说了nvm是管理多个不同的版本的node的工具，使用 nvm list 可以查看当前安装的不同的node版本

Paste_Image.png

对应的文件夹中如下图

Paste_Image.png

如果要使用对应的版本，使用nvm use 版本号（如6.9.2）即可

Paste_Image.png

如果要卸载对应的版本，使用nvm uninstall 对应的版本号（如6.9.5） 即可

使用npm来安装插件

全局（-g）安装supervisor

npm install supervisor -g
安装完成之后在对应的目录下有相应的插件

Paste_Image.png

如果遇到安装好的插件 使用命令的时候出现不是内部或外部命令，也不是可运行的程序或批处理文件提示，一般只有两个原因。

• 使用命令查看 全局目录第一层npm ls -global --depth=0，是否有对应的插件，也就是检查下插件的完整性，是否安装成功
• 查看如下图路径下，对应的插件的环境变量是否配置正确

Paste_Image.png

全局安装 nodemon

npm install nodemon -g

Paste_Image.png Paste_Image.png

全局安装 Babel (ES6到ES5转换的插件 )

npm install -g babel-cli

在当前项目中安装转换插件命令
npm install babel-preset-es2015 –save

手动将es6转换成es5的命令(es6.js 和 es5.js 替换成你自己需要的js文件名)
babel es6.js --out-file es5.js --presets es2015

自动转换es6到es5的命令（多了一个-w）
babel es6.js -w --out-file es5.js --presets es2015

在页面中实时转换es6到es5

• 在当前项目安装babel-core插件（在网页上实时转换es6到es5）命令
  npm install babel-core@5 –save

• HTML页面引入babel-core实时转换js代码
  /node_modules/babel-core/browser.min.js

  
  Paste_Image.png

全局安装 Browsersync(实时刷新页面)

npm install -g browser-sync

• Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

• 在当前项目目录下启动Browsersync，开始监听
  browser-sync start --server --files "**"

Paste_Image.png

到这里，基本nodejs的环境就搭建好了，可以使用插件做自己想做的事了！

小结

• nvm是node的版本控制器，可以管理多个不同的版本的node
• npm 是管理node.js 第三方插件的一个工具
• nodejs就是为了方便程序员使用javascript来调用操作系统及相关硬件的代码库的javascript运行环境