智库项目由于并没有使用webpack进行组件化开发,也没有使用npm进行依赖管理,这些都是历史原因。但是是用了es6的一些新语法,像模板字符串、class、let、const、promise等新语法,因为我们需要考虑兼容性问题,所以需要将所有的js文件进行编译转码,这里我们就用到了babel。
首先,我们需要先全局安装babel:
$ npm install babel-cli -g
(在早期版本是install babel,现在版本需要install babel-cli)
然后,我们需要写一个配置文件(.babel),存放在根目录下,用于babel的配置。注意:整个文件的名称是'.babel',不能缺少前面的点。在配置文件中,我们要写入:
{
"presets": [],
"plugins": []
}
在presets中存放的是规则集,官方提供了许多的规则集:
# ES2015转码规则
$ npm install -g babel-preset-es2015
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install -g babel-preset-stage-0
$ npm install -g babel-preset-stage-1
$ npm install -g babel-preset-stage-2
$ npm install -g babel-preset-stage-3
然后,我们便可以配置.babel文件了:
{
"presets": [
"es2015"
],
"plugins": []
}
接下来,我们就需要开始使用命令行转码了:
在项目目录下,使用terminal输入:
# 转码结果输出到标准输出
$ babel test.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel a.js --out-file b.js
# 或者
$ babel a.js -o b.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel -d lib/ js/
# -s 参数生成source map文件
$ babel src -d lib -s
编译成功之后,只需要把引入js的路径js/改成lib/就可以了。