Webstorm配置ES6自动转ES5

1.初始化npm生成package.json文件:

在项目之中点击左下角 Terminal 进入命令行模式, 执行 node init ,没有修改的话一路点击确定生成package.json文件

2.安装babel相关：

preset使用 babel-preset-env ,如果以前使用 babel-preset-es2015 ,可以执行 npm uninstall --save-dev babel-preset-es2015 卸载

# 1.安装babel-cli
npm install --save-dev babel-cli

# 2.安装preset
npm install babel-preset-env --save-dev 

3.项目根目录下建立.babelrc文件,内容如下:

{
  "presets": [
    "env"
  ]
}

4.WebStorm配置:

setting>Languages & Frameworks>JavaScript 选择 ECMAScript6

• setting>Tools>File Watchers ,点击右上角添加Babel,在弹出的界面选择babel.cmd的位置.

• 可以选择项目内的node_modules下.bin文件夹下的babel.cmd.也可以选择全局安装babel之后,在C:\Users\Administrator\AppData\Roaming\npm下的babel.cmd

此时配置完成,当含有ES6的js文件发生变化时,会在根目录下/dist文件夹下生成同名js文件,修改同步更新.