Свойства класса ECMAScript невозможны в электронном приложении vue? - PullRequest
Новая
       4

Свойства класса ECMAScript невозможны в электронном приложении vue?

0 голосов
/ 26 февраля 2020

Я разрабатываю приложение vue, которое работает на электроне. Для простоты установки я использую vue -cli с vue -cli-plugin-electronic-builder .

Я создал проект, используя: 

vue create

проверил babel в функции выбора

добавил электронные пакеты, используя: 

vue add electron-builder

и создал класс в foo.js: 

export class Foo {
  foo = "Hello";
}

Теперь при импорте этого класса в сгенерированный main.js (где создается экземпляр Vue) я могу использовать 

npm run electron:serve

, чтобы запустить приложение в электронном виде. Он открывается, не показывает ошибок, все как положено.

Но если я попытаюсь импортировать класс Foo в сгенерированный background.js (где создается электрон windows) и запустить 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

Согласно README со страницы github для @ vue / babel-preset-app, он должен использовать plugin-proposal-class-properties. Это похоже на то, что следует использовать.

Я также пытался использовать vue.config.js с configureWebpack и велел использовать загрузчик babel с предустановкой vue. Та же ошибка.

Можно ли использовать свойства класса при импорте модуля в background.js?

1 Ответ

0 голосов
/ 27 февраля 2020

Я нашел решение для своей проблемы, просматривая документацию для vue -cli-plugin-electronic-builder.

Используется цепочка веб-пакетов Пакет для настройки электронной спецификации c связывание.

Поэтому вместо использования 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"]
          });
      }
    }
  }
};

Тогда импорт работает как положено.

...