Webstorm中使用babel转码器

/**仅记录自己的学习历程**/

首先我使用的是目前最新版的webstorm-2017.2.2，不确定老版本是否一致。

1.安装babel-cli

> npm install babel-cli --save

安装babel会报错，提醒你卸载babel安装babel-cli

2.配置File Watcher

选择File -> setting -> Tools -> File Watchers,右上角添加Babel

 

进入babel配置选项页，如果没有特殊要求，使用默认配置即可。Arguments：命令执行参数，参见Babel CLI。其中无论你是全局安装babel-cli还是局部安装babel-cli，Program选项指向包安装目录中的babel.cmd即可

  

3.安装babel-preset-env

配置好之后babel还是无法运行的，因为在babel配置选项中Arguments有一个 --presets env参数会报错，提示找不到，所以还需要安装babel-preset-env

> npm install babel-preset-env --save

注意，这里babel-preset-env一定要本地安装，不可以全局安装。

env在这里是可选项，如果你想使用es2015或其它的，只要把 --presets 后面换成es2015，即 --presets es2015，然后本地安装babel-preset-es2015即可。

测试效果如下：

 

4.疑问

在实际测试过程我发现ES6中的import语法经过babel转换后并不能直接使用，而必须使用webpack打包之后才有效，思考之后觉得应该是ES5没有模块的概念，babel转码之后使用的是Node中的CommonJS规范，在浏览器中并不适用，而经过webpack打包之后实际是一个JS文件，就不存在模块之间相互调用的关系了，所以可以直接在浏览器中运行。

补：在最新的node-v8.5.0版本中已经支持ES6的module语法