前言
最近自学了babel这个Nodejs模块，感觉功能还是挺强大的，在这里，我们就详细讲一下如何在Webstorm上利用babel自动编译你的Es6语法的js文件，让他自动实时转换为Es5语法?
操作流程
第一步：Webstorm内新建一个项目，这里以TEST为例。
第二步：安装babel-cli模块。
cnpm i babel-cli --save-dev
图示-01
安装完成后，可以看到项目目录的变化，如下图所示：
图示-02
第三步：新建一个js文件，这里以test.js为例，在文件内使用Es6的语法试试？
图示-03
在这里可以看到一句红线报错了，这是为什么呢？很简单，因为当前项目对于这个Es6语法还不认识，那怎么办呢？很简单，将项目中的js语法修改为Es6语法，然后保存即可，如下图所示：
图示-04
到这一步了，大家应该可以看到，js文件内报错的语法问题已经不见了。证明现在项目内可以识别Es6语法的js文件啦。
第四步：在项目下建立.babelrc配置文件，配置内容如下所示：
{
"presets": [
"es2015"
]
}
第五步：安装babel-preset-es2015模块，如下图所示：
图示-05
第六步：在Webstorm这个IDE内建立监听
图示-06
修改参数如下图所示，然后保存设置：
图示-07
第七步：在test.js中写一段Es6的语法看看项目变化、如下图所示：
源文件：Es6语法
图示-07
编译文件：Es5语法
图示-08
可以看出来，当自己放浪不羁的写Es6语法时，Babel监听器会随时监听js文件的变化，然后在设置的编译目标文件下生成对应目录的Es5语法文件，十分的方便。而且编译后的文件，自动就是严格模式！如果教程内有任何错误的描述，欢迎大家指正。谢谢~
说明
原创作品，禁止转载和伪原创，违者必究！
网友评论