vuejs 使用 babel plugin-proposal-class-properties

Question

我有一个类，我在其中使用一些像这样的静态属性：

class Entity {
  static LIMIT = 10;
}

所以，我可以做到：

Entity.LIMIT

为了做到这一点，我使用了 babel plugin-proposal-class-properties，在我的 .babelrc 中我有：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

我正在使用 jest，我的测试使用该配置通过。现在我需要在vuejs 组件中使用Entity 类的功能。但我得到了错误： 模块解析失败：意外令牌。您可能需要适当的加载程序来处理此文件类型

我还在我的项目根目录中尝试了一个 babel 配置文件：babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
};

但是没有用。 如何配置 vuejs，让这个 babel 插件工作？

我正在使用 vue2.6.11 和 vue-cli 3

Answer 1

在尝试将“importabular”与 vuejs（vuejs 2、vue-cli-3）一起使用时，我遇到了同样的问题。 Importabular 使用类属性，经过一番研究我发现了这个 babel 插件（plugin-proposal-class-properties），我安装了它并添加到 vue.config.js 中。

为了最终让它工作，我不得不在transpileDependencies: 选项中添加“importabular”（或嵌套路径）。为什么？因为，默认情况下，Babel 会忽略 node_module 中的任何内容，所以你必须告诉 Babel 不要忽略这个特定的文件夹。

所以，如果你想在 vue 中使用 babel 或一些带有 node_module 的 babel 插件，你应该修改 vue.config.js 如下：

module.exports = {
  transpileDependencies: [
    'path/in/node_module',
  ],
}

并将 babel.config.js 更改如下：

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"],
  ]
}