Webstorm设置自动es6转es5（支持es2020）

1.cnpm i @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/plugin-proposal-private-methods -D

---

2.cnpm i webpack webpack-cli webpack-dev-server -D

---

3.setting->Languages@Frameworks->Javascript

version选择ECMAScript 6

---

4.setting->Tools->File Watchers

点击”+“选择Babel

Program: $ProjectFileDir$\node_modules\.bin\babel
Arguments: $FilePathRelativeToProjectRoot$ --out-dir dist/js --source-maps --presets @babel/preset-env
Output paths to refresh: $FilePathRelativeToProjectRoot$/dist/js/$FileNameWithoutExtension$.js:$FilePathRelativeToProjectRoot$/dist/js/$FileNameWithoutExtension$.js.map

---

5.在项目根目录下创建 webpack.config.js 文件，配置如下：

const path = require('path')
module.exports = {
    //在配置文件中我们需要手动指定入口和出口

    //入口 表示要使用webpack打包哪个文件
    entry:path.join(__dirname,'./dist/js/index.js'),
    //出口 输出文件的相关配置
    output:{
        path:path.join(__dirname,'./dist'),//指定打包好的文件输入到那个目录中去
        filename:'bundle.js' //指定输出文件的名称
    }
}

---

6.在项目根目录下创建 .babelrc 文件，配置如下：

{
  "presets": [
    ["@babel/env",  {"modules": false}]
  ],
  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
}

---

7.最后需要打包的时候输入webpack即可生成bundle.js（可执行webpack --watch监听打包，不用重复打包操作）