1.项目执行npm init生成package.json文件（npm init后一直回车可以跳过设置步骤，直接使用默认设置；）。
$ npm init
- 全局安装
babel-cli（建议再使用--save-dev安装一次，记录依赖包）
$ npm install -g babel-cli
可以使用 npm list --depth=0 -g查看npm全局安装过的工具包
$ npm list --depth=0 -g
npm全局安装过的工具包
- 创建
.babelrc配置文件
{
"presets": [], //设置转码规则
"plugins": [] //设置插件
}
- 安装
ES2015(es6)、es7转码规则，presets字段设定转码规则
-
es6转码规则
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
-
es7转码规则
# 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
stage-0的功能范围最广大，包含stage-1,stage-2以及stage-3的所有功能，同时还另外支持如下两个功能插件：详情查看：babel配置-各阶段的stage的区别
- 修改
.babelrc.js配置文件
{
"presets": [
"es2015",
"stage-0"
],
"plugins": []
}
5.使用转码功能
- 项目新建
./src/test.js文件
test.js
使用babel命令行执行编译,执行
$ babel ./src/test.js --out-file ./dist/test.js
得到转码后的文件
`babel`执行es6转译es5
- 直接输出文件执行结果
# 直接执行转码结果，并将标准输出打印到控制台 $ babel ./src/test.js
- 将单个
.js文件转码# 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel ./src/test.js --out-file ./dist/test.js # 或者 $ babel ./src/test.js -o ./dist/test.js
- 整个文件夹进行转码
# 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel ./src/ --out-dir ./dist/ # 或者 $ babel ./src -d ./dist
-s参数：转译时生成对应的.map文件# -s 参数生成source map文件 $ babel ./src -d ./dist -s
可以使用package.json的scripts参数配置快捷命令行记录转译命令
{
"scripts": {
"file": "babel ./src/test.js --out-file ./dist/test.js",
"dir": "babel ./src --out-dir ./dist"
}
}
执行
# 转码单个文件
$ npm run file
# 转码整个文件夹
$ npm run dir
