Webstorm中配置babel参数在同一目录下将ES6编译为ES5

在工程所在命令行里：

1：先安装babel转译环境插件:  npm i babel-preset-env --save-dev

C:\Users\admin\Desktop\新建文件夹\jude-1.0\jude>npm i babel-preset-env --save-devjude@0.1.0 C:\Users\admin\Desktop\新建文件夹\jude-1.0\jude+-- babel-preset-env@1.6.0`-- react-scripts@1.0.13  `-- babel-preset-react-app@3.0.2    `-- babel-preset-env@1.5.2

2: 再安装babel模块: npm install babel-cli

C:\Users\admin\Desktop\新建文件夹\jude-1.0\jude>npm install babel-clijude@0.1.0 C:\Users\admin\Desktop\新建文件夹\jude-1.0\jude`-- babel-cli@6.26.0  +-- babel-core@6.26.0  +-- babel-polyfill@6.26.0  | +-- core-js@2.5.1  | `-- regenerator-runtime@0.10.5  +-- fs-readdir-recursive@1.0.0  +-- output-file-sync@1.1.2  `-- v8flags@2.1.1    `-- user-home@1.1.1

3:在当前工程右键Settings,

点击+号选择babel，然后进行参数配置，主要是以下参数。

Program默认即可

Arguments: $FilePathRelativeToProjectRoot$ --out-file $FileDir$\$FileNameWithoutExtension$-compile.js --source-maps --presets env

Output paths to refresh: $FileDir$\$FileNameWithoutExtension$-compile.js:$FileDir$\$FileNameWithoutExtension$-compile.js.map

然后点击apply后即可在js文件同意目录下观察到编译后的代码