原文地址：http://www.ningcl.com/
相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生，在 ES6 代码被编译转化为 ES5 代码的过程中，Babel 插件显得尤为重要。因为Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
安装node环境
初始化项目
新建一个项目目录，使用下面的命令初始化项目：
|
1
|
npm init
|
安装babel-cli
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行；Babel提供了babel-cli工具，用于命令行转码；
|
1
|
npm install babel-cli --save-dev
|
虽然你 可以 在你的机器上全局安装 Babel CLI, 但根据单个项目进行本地安装会更好一些。这样做有两个主要的原因：
- 同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
- 这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。
基本用法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
|
建立.babelrc文件
在项目根目录下，创建.babelrc，.babelrc是Babel的配置文件；该文件是用来设置转码规则和插件的，基本格式如下：
|
1
2
3
4
|
{
"presets":[],//转码规则
"plugins":[]// 转码插件
}
|
安装转码规则
1、在本地安装转码规则模块babel-preset-env
|
1
|
npm install --save-dev babel-preset-env
|
2、然后添加 “env” 到你的 .babelrc 文件的 presets 数组中。
|
1
2
3
4
5
6
|
{
"presets":[
"es2015"
],
"plugins":[]
}
|
编译代码
在项目根目录下新建目录src,在src文件下创建index.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const index = {
init(){
let all = this.add(1,2);
console.log(all);
let num = [1,2,3].map(item=>{
return item % 2 !== 0
});
console.log(num)
},
add(num1,num2){
return num1 +num2;
}
};
index.init();
|
使用babel命令行来编译
|
1
|
babel src/index.js -o dist/index.js
|
这样就可以，看见在dist目录下生成一个index.js文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var index = {
init: function init() {
var all = this.add(1, 2);
console.log(all);
var num = [1, 2, 3].map(function (item) {
return item % 2 !== 0;
});
console.log(num);
},
add: function add(num1, num2) {
return num1 + num2;
}
};
index.init();
|
使用npm来编译
使用babel命令行，一大长串，很容易忘记什么，所以，我们可以改造package.json，来使用更容易记住的命令来编译:
|
1
2
3
|
"scripts": {
"build": "babel src/index.js -o dist/index.js"
}
|
在”scripts”模块下，添加上面的命令行，然后使用命令：
|
1
|
npm run build
|
至此，大功告成。
参考文献：