智库项目由于并没有使用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/就可以了。