webStorm安装babel转码

这里只将babel安装到项目中。

1. 先建一个工程，在webstorm中选择

webstorm->preferences->Languages&Frameworks->javaScript

选择language version :ES6

2. 在项目总新建一个index.js文件，先写段es6的代码如下：

input.map(item => item + 1);

3. 新建一个工程配置文件package.json,填写

{

"name": "es6test",

"version": "1.0.0",

}

4.安装babel,你可以先cd到工程的根目录，也可以直接用webstorm中的Terminal

$ npm install --save-dev babel-cli

5.安装完毕后，再打开刚才写的index.js，工具就会给你提示，add watch，点击之后 工具应该给你配置的差不多了（当然你也可以再preferences->tools->file watchers中点击添加babel），在弹出的窗口的programs选项中填入

$ProjectFileDir$/node_modules/.bin/babel

就是babel的路径

6.添加babel的配置文件，在根目录中新建.babelrc文件，这个文件用来设置转码规则和插件，格式如下

{

"presets": [],

"plugins": []

}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装（我们现在只安装es2015转码规则就可以了，运行第一条命令即可）

# 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

然后，将这些规则加入.babelrc

{

           "presets": [

                          "es2015"

                           ],

          "plugins": []

}

7.现在你点击刚才的index.js下面有一个index-compiled文件就是babel把es6转为es5的文件，内容应该是

input.map(function (item) {

return item + 1;

});

这就说明安装成功并且有效了

---

本文参考了(阮一峰的babel教程)