ES6环境搭建

NodeJs安装步骤

l nvm（NodeJs版本管理工具）安装

l nvm配置淘宝镜像（下载更快）

修改settings.txt

root: D:\dev\nvm

path: D:\dev\nodejs

node_mirror: http://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

l 通过nvm安装对应版本的nodejs集（node、npm）

安装：nvm install 6.10.0

查看已经安装的node列表：nvm list

使用：nvm use 6.10.0

l npm设置淘宝镜像（下载更快）

npm config set registry https://registry.npm.taobao.org

常见的使用场景有以下几种：

l 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

l 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

l 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

 

 

在NodeJs环境中运行ES6

在FireFox浏览器中运行ES6

使用webstorm编写ES6代码

WebStorm配置支持ES6语法规则

l 运行结果

用Babel完成ES6到ES5的转换 

l babel全局安装

npm install -g babel-cli

l 使用npm创建一个nodejs工程，步骤如图：

l 在当前项目中安装转换插件（插件中的js代码，将用于转换）：

npm install babel-preset-es2015 –save

l 使用WebStorm打开第一步创建的nodejs工程，在工程中创建一个js文件，并编写ES6代码

l 手动将ES6转换成ES5

babel es6.js --out-file es5.js --presets es2015

自动转换

babel es6.js -w --out-file es5.js --presets es2015

 

在页面中实时转换ES6到ES5

l 在当前项目安装babel-core插件（在网页上实时转换ES6到ES5）

npm install babel-core@5 –save

l HTML页面引入babel-core实时转换js代码

/node_modules/babel-core/browser.min.js

使用Browsersync实时刷新页面和

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

l 安装Browsersync

npm install -g browser-sync

l 在当前项目目录下启动Browsersync，开始监听

browser-sync start --server --files "**"