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-dev
jude@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-cli
jude@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文件同意目录下观察到编译后的代码