javascript - 在 vue Electron 应用程序中无法使用 ECMAScript 类属性？

Question

我正在开发一个在 Electron 中运行的 vue 应用程序。为了便于设置，我使用带有 vue-cli-plugin-electron-builder 的 vue-cli .

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

vue create

一定要检查 babel在特征选择中

添加 Electron 包使用:

vue add electron-builder

并在 foo.js 中创建了一个类:

export class Foo {
  foo = "Hello";
}

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

npm run electron:serve

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

但是如果我尝试导入 Foo生成的 background.js 中的类(创建 Electron 窗口的地方)并运行 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

根据 github page 中的自述文件对于@vue/babel-preset-app
它应该使用 plugin-proposal-class-properties .这听起来完全像
应该使用的东西的类型。

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

在 background.js 中导入模块时，我是否可以使用类属性？ ?

Answer 1

在查看 documentation 时，我找到了解决问题的方法。对于 vue-cli-plugin-electron-builder。

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

所以不要使用 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"]
          });
      }
    }
  }
};

然后导入按预期工作。