ECMAScript类性质在vue电子应用中不可能

Question

我正在开发一个在电子中运行的vue应用程序。为了便于安装，我将vue-cli与vue-cli插件电子生成器一起使用。

我创建的项目使用：

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预设应用程序github页面上的自述它应该使用CCD_ 7。这听起来很像应该使用的东西的类型。

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

在background.js中导入模块时，有没有方法可以使用类属性？

Answer 1

在查看vue-cli插件电子生成器的文档时，我找到了解决问题的方法。

它使用webpack链包来配置电子特定捆绑。

因此，我没有在vue.config.js中使用configureWebpack，而是按照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"]
});
}
}
}
};

然后进口就如预期的那样发挥作用了。