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/