[英]ECMAScript class properties not possible in vue electron application?
I'm developing a vue application that runs in electron.我正在开发一个在电子中运行的 vue 应用程序。 For ease of setup I'm using vue-cli with the vue-cli-plugin-electron-builder .
为了便于设置,我将 vue-cli 与vue-cli-plugin-electron-builder 一起使用。
I created the project using:我使用以下方法创建了项目:
vue create
made sure to check babel
in the feature select确保在功能选择中检查
babel
added the electron packages using:使用以下方法添加了电子包:
vue add electron-builder
and created a class in foo.js
:并在
foo.js
创建了一个类:
export class Foo {
foo = "Hello";
}
Now, when importing that class in the generated main.js
(where the Vue instance gets created) I can use现在,当在生成的
main.js
(创建 Vue 实例的地方)中导入该类时,我可以使用
npm run electron:serve
to run the application in electron.在电子中运行应用程序。 It opens up, shows no errors, all as expected.
它打开了,没有显示任何错误,一切都符合预期。
But if I try and import the Foo
class in the generated background.js
(where the electron windows gets created) and run npm run electron:serve
it shows me this error:但是,如果我尝试在生成的
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
According to the README from the github page for @vue/babel-preset-app it should use the plugin-proposal-class-properties
.根据来自@vue/babel-preset-app 的github 页面的自述文件,它应该使用
plugin-proposal-class-properties
。 This sounds exactly like the type of thing that should be used.这听起来就像应该使用的东西类型。
I also tried using the vue.config.js
with configureWebpack
and told it to use the babel-loader with the vue preset.我还尝试将
vue.config.js
与configureWebpack
一起使用,并告诉它使用带有 vue 预设的 babel-loader。 Same error.同样的错误。
Is there a way for me to use class properties when importing a module in the background.js
?在
background.js
导入模块时,有没有办法让我使用类属性?
I found a fix for my problem while looking at the documentation for the vue-cli-plugin-electron-builder.我在查看 vue-cli-plugin-electron-builder 的文档时找到了解决我的问题的方法。
It uses the webpack-chain package to configure electron specific bundling.它使用webpack-chain包来配置特定于电子的捆绑。
So instead of using configureWebpack
in vue.config.js
I setup my config as described in the example from 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"]
});
}
}
}
};
Then the imports work as expected.然后导入按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.