Webstorm配置babel将.js文件转换为es5
前言
最近编写工具站(Laravel + Vue.js【是引用.js文件，不是前端vue.js后端laravel】)的时候，写js的时候，是在不想写es5语法，比如写var，Webstorm提醒使用let或者const，本人是强迫症，不想有个波浪线提示。
并且某些低版本浏览器对es6兼容性不太好，所以这里还有个兼容性问题。而node.js中可以使用babel将es6语法转换为es5语法。所以我就想能不能利用babel，将单个.js文件的语法转换为es5？经过一番实践，成功了。
下面是步骤
步骤
安装babel-cli
npm install -g babel-cli
注意：需要加g全局安装。
安装babel-preset-env
npm install babel-preset-env --saveBabel已经弃用了babel-preset-es2015，现在最新启用的是babel-preset-env
这个可以在项目中安装babel-preset-env，亦可以在用户家目录安装。
windows家目录是：C:\Users\99141 【99141是我的用户名，你们需要是自己的】
我这里是选择在家目录安装**babel-preset-env**，因为我想在任何项目里面都能使用该东西。
在命令行里面使用
因为webstorm中的External Tools工具，本质也就是调用命令行而已。
所以我先尝试在命令行里面使用看看能不能成功。
输入
babel -h查看帮助，没报错误，就是成功啦。
我准备了
一个regular.js文件，里面有es6语法。
好了，在命令行里面输入：
babel regular.js --presets env --out-file reg.js编译regular.js 到文件reg.js ， 用的预设规则是env 【前面安装的，如果该项目文件夹里面(node_modules)没有安装 babel-preset-env并且家目录也没有安装的话，此处运行是会报错的。】
没报错，就成功啦~
查看reg.js文件：
的确是es5语法了。
webstorm配置
新建Babel
如下图
填写内容：
Name: Babel
名称随意即可
description: transform es6 to es5
描述随意即可
Program: F:\nodejs\node_global\babel.cmd
之前安装的babel-cli 文件的位置，我这里是设置到了F盘，默认应该是C盘。 设置请看：https://cloud.tencent.com/developer/article/1538154 这里不影响，去C盘找就行。直接搜索
babel.cmd也可。
Parameters: --presets env $FileDir$/$FileName$ --out-file $FileName$
参数，默认以上即可
Working directory:$ProjectFileDir$
工作目录，默认以上即可。
使用
先看看，同样的es6语法：
1、
2、
3、
变成es5语法了。