在 vue 电子应用程序中无法使用 ECMAScript 类属性？

Question

我正在开发一个在电子中运行的 vue 应用程序。 为了便于设置，我将 vue-cli 与vue-cli-plugin-electron-builder 一起使用。

我使用以下方法创建了项目：

vue create

确保在功能选择中检查babel

使用以下方法添加了电子包：

vue add electron-builder

并在foo.js创建了一个类：

export class Foo {
  foo = "Hello";
}

现在，当在生成的main.js （创建 Vue 实例的地方）中导入该类时，我可以使用

npm run electron:serve

在电子中运行应用程序。 它打开了，没有显示任何错误，一切都符合预期。

但是，如果我尝试在生成的background.js （创建电子窗口的位置）中导入Foo类并运行npm run electron:serve它会显示这个错误：

ERROR  Failed to compile with 1 errors

 error  in ./src/foo.js

Module parse failed: Unexpected token (2:6)
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
| export class Foo {
>   foo = "Hello";
| }
|

 @ ./src/background.js 9:0-28
 @ multi ./src/background.js

根据来自@vue/babel-preset-app 的github 页面的自述文件，它应该使用plugin-proposal-class-properties 。 这听起来就像应该使用的东西类型。

我还尝试将vue.config.js与configureWebpack一起使用，并告诉它使用带有 vue 预设的 babel-loader。 同样的错误。

在background.js导入模块时，有没有办法让我使用类属性？

Answer 1

我在查看 vue-cli-plugin-electron-builder 的文档时找到了解决我的问题的方法。

它使用webpack-chain包来配置特定于电子的捆绑。

因此，我没有在vue.config.js中使用configureWebpack ， vue.config.js按照 webpack-chain 示例中的说明设置了我的配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.module
          .rule("compile")
          .test(/\.js$/)
          .exclude.add(/(node_modules|dist_electron)/)
          .end()
          .use("babel")
          .loader("babel-loader")
          .options({
            presets: ["@vue/cli-plugin-babel/preset"]
          });
      }
    }
  }
};

然后导入按预期工作。