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查看,里面包含了现有插件以及每个插件的使用方法和转码效果。