安装所需依赖
npm install -g babel-cli babel-register babel-preset-es2015 babel-preset-stage-2
*可以按需求选择全局安装或者作为dev依赖安装,本例为全局安装
依赖说明
包 | 说明 |
---|---|
babel-cli | babel主程序 |
babel-register | babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。 |
babel-preset-es2015 | ES2015转码规则 |
babel-preset-stage-2 | ES7不同阶段语法提案的转码规则(共有4个阶段,0~3,此处选用2) |
使用方法
直接使用
首先创建配置文件
Babel的配置文件是 .babelrc ,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets 字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
本例中我们已经安装了 es2015 和 babel-preset-stage-2
填写配置文件
{
"presets": [
"es2015",
"stage-2"
]
}
之后,就可以在命令行内使用babel了,基本用法如下
# 转码结果输出到标准输出
$ 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
使用babel-register
用法1
使用时,必须首先加载babel-register。
require("babel-register");
require("./index.js");
然后,就不需要手动对index.js转码了。
需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
用法2
若为node程序,另一种更简洁的使用方式如下:
- 在项目根目录创建bin文件夹
- 进入bin文件夹创建文件,名为dev(名称随意,注意没有后缀)
- 键入如下代码
require('babel-register');
require('想要编译的文件的位置');
- 终端使用
node ./bin/dev
即可完成先编译再运行的操作
此招针对node迟迟不肯实现的 import 特性 ´_>`
参考来源: