babel
Babel是什么
Babel 是一个 JavaScript 编译器，可以将ES6代码转为ES5代码，从而在现有环境执行。
安装Babel
babel-cli 是babel解释器的客户端主程序
1
$ npm install -g babel-cli
在项目内运行 babel-cli
初始化项目
1
$ npm init
安装babel-cli
1
npm install --save-dev babel-cli
安装ec2015的转化器,因为ec2015语法并不是所有浏览器都兼容
1
$ npm install --save-dev babel-preset-es2015
安装react转码规则
1
$ npm install --save-dev babel-preset-react
配置文件.babelrc
然后在项目的根目录下新建一个 .babelrc 文件，写入:
1
2
3
{
"presets": ["es2015"]
}
notice
所有Babel工具和模块的使用，都必须先写好.babelrc 。
此时babel已安装好，可以使用bable命令对文件进行转码输出了
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
# 整个目录转码,把src文件中所有的文件转码到lib文件夹中对应文件名下，
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
延伸babel在项目中的使用
修改package.json
{
//...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0"
}
}
转码的时候，就执行下面的命令。
1
$ npm run build
babel demo
Project-file-name/es2015/index.js
let name = "zhangsan";
alert(name);
我们来利用babel转化一下，命令行执行：
1
$ babel ./es2015/index.js --out-file ./es2015/index-build.js
index-build.js就是转换后的js：
"use strict";
var name = "zhangsan";
alert(name);
浏览器环境browser
通过安装5.x版本的babel-core模块获取。
1
$ npm install babel-core@5
运行上面的命令以后，就可以在当前目录的node_modules/babel-core/子目录里面，找到babel的浏览器版本browser.js（未精简）和browser.min.js（已精简） 然后，将下面的代码插入网页。
1
2
3
4
<script src="node_modules/babel-core/browser.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
