对es6语法进行转码

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

猜你喜欢

转载自blog.csdn.net/wengqt/article/details/80558784