WebStrom利用Babel工具转码ES6代码

1.       打开WebStrom，先新建一个空的工程

2.      添加一个Json文件 package.json；

添加内容：

{
  "name": "test-name",
  "version": "0.0.1"

}

3.    打开webstorm的Terminal (快捷键alt+f12)，安装babel-cli.(需要先安装node.js)

npm install --save-dev babel-cli 

 

4.    File-->Settings-->Languages&Frameworks-->JavaScript 

 JavaScript language version 选择ECMAScript6.

5.    File-->Settings-->Tools-->FilesWatchers 中加上Babel

6.      编辑babel插件路径和命令

Program 填写F:\WebstormProjects\es6demo\node_modules\.bin\babel.cmd

（工程中babel.cmd的路径）

Arguments 要填写 转码命令： --presets es2015--presets react  --presets stage-2

7.在Terminal(快捷键alt+f12)中，安装babel的ES6的preset（有的可能不是必须的）

   npm install--save-dev babel-preset-es2015

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-cli babel-preset-react

npm install --save-dev babel-plugin-transform-class-properties

每安装一个插件，package.json文件会增加相应的内容：

8.添加.babelrc文件

添加内容：{
  "presets": ["es2015",
                "stage-2",
                "react"],
  "plugins": ["babel-plugin-transform-es2015-modules-amd",//关键
               "transform-class-properties"]
}

官方网站：https://babeljs.cn/