在电子电子应用中无法实现ECMAScript类属性？

Question

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

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

vue create

请确保在功能选择中选中babel

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

vue add electron-builder

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

export class Foo {
  foo = "Hello";
}

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

npm run electron:serve

以电子方式运行该应用程序。它将打开，没有显示任何错误，均与预期的一样。

但是，如果我尝试将Foo类导入生成的background.js（在其中创建电子窗口的位置）并运行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 page中的自述文件它应该使用plugin-proposal-class-properties。这听起来像应该使用的东西的类型。

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

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

Answer 1

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

因此，而不是像在Webpack-chain中的示例中所描述的那样，我在configureWebpack中使用vue.config.js：>

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

然后导入将按预期工作。