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公司出品，在线转换地址