ES6环境搭建---ES6语法精讲

ES6的使用环境有：
node 、IE、Chrome等。
ES6不能在IE中使用。
ES6目前在任何版本任何环境都没有做到百分之百的兼容。
查看浏览器对ES6的支持情况：http://kangax.github.io/compat-table/es6/

ES6编码环境搭建

一、使用Babel工具将ECMAScript6转换为ECMAScript5

例如：创建项目文件夹目录结构为

test
    |
    es6.js

1.全局安装babel-cli

npm install -g babel-cli

2.安装es6到es2015的转译插件

npm install babel-preset-es2015 --save

3.新建文件es6.js

转译之前的代码

let name = "dandan";
console.log(name);

4.babel命令转译

运行

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

将es6.js文件转译成ES2015，并输出到es5.js的文件中去

转译之后的代码

"use strict";

var name = "dandan";
console.log(name);

此时的项目文件夹目录结构为：

test
    |
    es5.js
    |
    es6.js

二、使用Browsersync实现ES6到ES5的同步翻译

1.安装browser-sync 将ES6实时转译成ES5

npm install -g browser-sync

npm install babel-core@5 --save

test
    |
    es5.js
    |
    es6.js
    |
    index.html----新建一个index.html文件
    |
    package.json----npm init来初始化这个项目产生的配置文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6环境搭建</title>
</head>
<body>
<div>
    ooooo
</div>
<script src="node_modules/babel-core/browser.js"></script>
<script src="node_modules/babel-core/browser-polyfill.js"></script>
<script src="es6.js" type="text/babel"></script>
</body>
</html>

启动项目并在浏览器中打开

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

终端会显示如下信息：

D:\dandan\test>browser-sync start --server --files "**"
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.32.75.3:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

此时会自动打开默认浏览器，并渲染index.html文件。在编辑其中修改index.html或者es6.js中的内容，会实时将修改更新到浏览器中。

其中起决定作用的是Browsersync。

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。官网：http://www.browsersync.cn/