使用babel转换es6编写的程序

配置文件

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件，这是必要的一步。


该文件用来设置转码规则和插件，基本格式如下。

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

将你需要的规则加入.babelrc。

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

命令行转码

配置好必要的文件后，下一步需要使用Babel提供的工具babel-cli，用于命令行转码。

$ npm install --global babel-cli

创建一个test.js，内容如下。

const NAME = 'myName';

转码结果输出到标准输出

$ babel test.js

会在命令行看到转码后的结果。

var NAME = 'myName';

转码结果写入一个文件

$ babel test.js --out-file test.build.js

执行命令后，会出现一个test.build.js，内容是对test.js转码后的结果。

整个目录转码

$ babel src --out-dir build

当前项目

上面代码是在全局环境下，进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。


为解决这一问题，通常将babel-cli安装到项目中。

$ npm install --save-dev babel-cli

然后，改写package.json中的脚本。

{
  // ...
  "scripts": {
    "babel": "babel src --out-dir build"
  }
}

再执行如下命令。

$ npm run babel

参考文档

• http://www.ruanyifeng.com/blog/2016/01/babel.html
• http://babeljs.cn/docs/usage/babelrc/
• http://babeljs.cn/docs/plugins/