vue-cli3搭建的项目遇到Syntax Error: **/path/：Missing class properties transform.

事情经过是这个样子的：👀

有一天下午，天气晴朗，肚子有点饿，但是还不到下班时间，没心思敲业务代码了，于是灵机一动，在vue-cli3搭建的项目里动手实现一个event bus类吧。

于是一顿猛敲

class EventBus {
  constructor() {
    this._events = this._events ?? new Map();
  }
  // 触发事件
  fire = (event, ...args) => {
    // ...
  }
  // 添加事件监听
  add = (event, fn) => {
    // ...
  }
  // 移除事件监听
  remove = (event, fn) => {
    // ...
  }
}

export default EventBus;

因为用到了类，和es2020的新语法，于是安装了一下最新的@babel/preset-env；并在babel.config.js里加上了presets配置项

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@babel/preset-env'
  ]
}

信心满满的把项目跑起来，duang~~控制台报错了

真是有点头大呢 🤦‍♀️

一顿网上爆搜，看到一个大佬说，webpack里的module.loaders里配置的options的顺序要跟babel.config.js里的顺序一致；

试了一下，把babel.config.js里的presets配置项的@babel/preset-env挪到前面，再跑一下试试

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset',
  ]
}

噔噔噔～～～跑起来了！！

---

查@vue/cli-plugin-babel源码时候发现，他引用的是@babel/preset-env 7.9.0其实已经包含了@babel/plugin-proposal-class-properties，@babel/plugin-proposal-nullish-coalescing-operator 等语法插件😂