ECMAscript6 转换器 babel 的安装与使用

目录
[隐藏]

learn_babel

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

点赞 (2)
  1. mbwx说道:
    Google Chrome 35.0.1916.114 Google Chrome 35.0.1916.114 Windows XP Windows XP

    看不懂,那就抢个沙发吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code