babel编译es6

一，准备

1，配置文件.babelrc ， 使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下:

"presets": [
      "es2015",
      "stage-2"
],
"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

最后就是这样：

"presets": [
      "es2015",
      "stage-2"
],
"plugins": []

2，命令行转码babel-cli

  >> $ npm install --global babel-cli  

基本用法如下:

  # 转码结果输出到标准输出

  >> $ babel example.js

  # 转码结果写入一个文件

  # --out-file 或 -o 参数指定输出文件

  >> $ babel example.js -o compiled.js

  # 整个目录转码

  # --out-dir 或 -d 参数指定输出目录

  >>  $ babel src -d lib

  # -s 参数生成source map文件

  >> $ babel src -d lib -s

3，然后，改写package.json

 {

   "devDependencies": {

   "babel-cli": "^6.0.0"

  },


  "scripts": {

    "build": "babel src -d lib"  //重写命令

  },

}

4，转码的时候，就执行下面的命令:

 >> $ npm run build

---

二，babel配置webstrom

1，安装的env需要babel-preset-env这个模块；

  >> cnpm i babel-preset-env --save-dev

2，配置.babelrc文件

  ["env", {  

     "modules": false,

     "targets": {  

         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]  

      }  

    }

  ],  

3，对webstrom进行设置

settings >> file-watch >> 点击右上方+号，添加babel

   Program选项： $ProjectFileDir$/node_modules/.bin/babel
   
   Arguments选项：   dist  换成你要输的目录即可。

   最后点击apply 再点击保存！！！

---end.