Vue cli 项目中定义类的私有属性会报错

Question

我在utils内定义了js文件，export了一个自定义的class，如下：

const test = class {
    #a = 100
        b = null
}

export default test

在vue文件中引入就会有以下的报错

Module parse failed: Unexpected character '#' (2:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

请问是什么原因呢？

Answer 1

Babel 7.14
此版本之后默认添加到了@babel/preset-env：

// babelrc
{
  "presets": ["@babel/preset-env"]
}

此版本之前：

// babelrc
{
  "presets": ['@babel/preset-env'],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
}

Answer 2

新标准中已经存在私有成员的概念了，应该是你项目中，没有对应的loader