ECMAscript6 标准于 2015 年 6 月正式发布,所以又称为 ECMAscript 2015。随着各浏览器对其逐渐完善的支持,可以预见的是,2017 至 2018 年它将会取代 ES5 成为主流。
使用 Babel 转换器可以让你在未获得浏览器支持的情况下,以 ES6 的语法形式书写代码, Babel 负责将它转换为可在当前主流浏览器环境执行的 ES5 的代码。
一、安装
使用 npm 可以安装一个 babel 执行环境。
npm i -g babel –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist
二、使用
1. REPL 环境实时执行
Babel自带一个 babel-node 命令,提供支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。
命令行实时执行脚本
$ babel-node
$ let {a, b, c} = {a: 1, b: 3, c: 5};
$ console.log(a, b, c);
执行脚本文件
$babel-node es6.js
2. 将 ES6 转换为 ES5 代码
$babel es6.js #转换代码直接输出
$babel es6.js -o es5.js #转换代码输出到文件
$babel -d build-dir source-dir #转换整个目录
$babel -d build-dir source-dir -s #转换整个目录,并生成 source map 映射文件
Babel 只转换句法,不转换新的 API,如 Promise、Set、Map、Symbol 等。所以使用新的 API 需要 polyfill 支持。
下载 babel-polyfill:
npm install --save babel-polyfill
然后在 babel-polyfill 目录下找到 babel-polyfill.min.js ,在浏览器中引入它。
3. 浏览器中使用
$npm install –save-dev babel-core
在 babel-core 的目录中找到如下文件:node_modules/babel-core/browser.js,在浏览器中引入。
<script src=”node_modules/babel-core/browser.js”></script>
<script src=”es6.js” type=”text/babel”></script>
<script type=”text/babel”>
// ES6 code
</script>
此外,Google 的 Traceur 转码器,也可以实现类似功能。
https://github.com/google/traceur-compiler
这种使用方式只适用于开发环境,或者一些在线实时转换 demo 的工具。
相关参考
http://es6.ruanyifeng.com/#docs/intro
https://babeljs.io/docs/setup/
https://babeljs.io/docs/learn-es2015/
http://www.ecma-international.org/ecma-262/6.0/index.html
看不懂,那就抢个沙发吧。