简单的配置babel.js 编译环境

1.项目执行npm init生成package.json文件（npm init后一直回车可以跳过设置步骤，直接使用默认设置；）。

$ npm init

2. 全局安装 babel-cli（建议再使用--save-dev 安装一次，记录依赖包）

$ npm install -g babel-cli

可以使用 npm list --depth=0 -g查看npm全局安装过的工具包

$ npm list --depth=0 -g

npm全局安装过的工具包

3. 创建.babelrc配置文件

{
  "presets": [], //设置转码规则
  "plugins": []  //设置插件
}

4. 安装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的所有功能，同时还另外支持如下两个功能插件：

• transform-do-expressions
• transform-function-bind

详情查看：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