ES6转换成ES5/ES3

前言

在ES6代码和语法糖满天飞的时候，却因为浏览器兼容问题而不敢使用。现在我介绍2种方法来转换ES6。babel脚本转换和在线转换。

babel脚本转换

介绍

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而能在先有环境下使用。

使用到的插件介绍：

插件名	描述
babel-cli	Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。
babel-core	babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。
babel-polyfill	Babel用来编译新的JavaScript语法，Polyfill（代码填充，也可译作兼容性补丁） 的技术。 简单地说，polyfill即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。能让你提前使用还不可用的 APIs，Array.from 就是一个例子。
babel-preset-es2015	预设 babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性。

插件官网链接：http://babeljs.cn/docs/plugins/

---

实例

1、项目路径配置

在项目里面创建一个src文件夹（用来保存原来JS文件），dist文件夹（输出转换成ES5/ES3的文件），node_modules（就是npm插件安装目录）。

2、配置文件package.json

{
  "name": "babel",
  "version": "1.0.0",
  "description": "ES62ES5",
  "author": "JarunWang",
  "scripts": {
    "build": "babel src -d dist",
    "watch": "babel src -d dist -w"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.5.2",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

安装插件

npm install –save-dev

3、如何使用

在src文件夹里面新建一个demo.js

var name = "Jane"
var es6 = `<div><span class = "class" style="color:red;">${name}</span></div>`

运行代码

npm run build

转换后在dist文件有demo.js

"use strict";

var name = "Jane";
var es6 = "<div><span class = \"class\" style=\"color:red;\">" + name + "</span></div>";

4、监听src文件夹

运行下面代码就会监听src文件夹里面的变动，有改动就会马上更新到dist。

npm run watch

5、结论

这就操作成功了，你就可以通过这个配置来写ES6。你也可以通过webpack和gulp等构造工具进行转换。我这里只提供最简单的方法。

代码：https://github.com/jarunwang/babel-scripTrack

---

在线转换

提供2个能在线转换ES6到ES5/ES3的网址，大家可以在这上面学习ES6。
1.Babel,在线转换地址
2.Traceur，Google公司出品，在线转换地址