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

Z时代
2024-02-11
分类：IT

我在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

请问是什么原因呢？

回答：

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"
  ]}