使用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

参考文档

posted @ 2017-09-07 14:43  月半流云  阅读(354)  评论(0编辑  收藏  举报