使用babel

1).Babel支持NPM包形式的安装,打开命令行窗口，切换到项目根目录，命令如下

    npm install babel-cli

 

2).安装成功后,在package.json文件里添加如下代码

 "scripts":{

   "start":"babel test.js  --out-file  test-compiled.js"

}

3).创建一个使用了ES6语法的javascript文件test.js 输入如下代码:

   [1,2,3].map(n=>n+1);

4). test.js文件里的代码使用了ES6的箭头函数，需要使用babel解码。打开命令行窗口,输入如下命令:

npm run start

5).编译过后的代码输出到了test-compiled.js 代码如下

[1,2,3].map(n=>n+1);

6).编译后的代码没有变化，babel没有将箭头函数转换成普通函数,babel默认不对任何语法转换,需要事先通过配置文件来指定转码es6语法特性。创建配置文件"。babelrc",代码如下

｛

“plugins”:[

   "transform-es2015-arrow-functions"

]

｝

7).安装babel转换插件。打开命令行窗口,输入如下命令:

  npm  install babel-plugin-transform-es2015-arrow-functions

注意:配置文件中插件的名字跟安装的NPM包的名字并不相同,配置文件内会省略前缀"babel-plugin"

8).再次使用babel进行转码，打开命令窗口,输入如下命令:

npm run start

打开转码后的文件test-compiled.js 里面包含如下代码:

"use strict"

[1,2,3].map(function(n){return n+1 ;})

箭头函数已经转换成了普通函数,转换后的代码可以直接在浏览器运行。

 

插件“transform-es2015-arrow-functions”只负责对箭头函数转码，如果需要转码其他的ES6特性,需添加对应的插件到配置文件。babel插件列表可以通过访问页面

http://babeljs.io/docs/plugins查看,里面包含了现有插件以及每个插件的使用方法和转码效果。