Шаблон Electron Forge с наблюдателями mobx-react

Недавно я начал экспериментировать с Electron Forge и считаю, что это отличный инструмент. Я также работал с пакетом mobx-react и использовал функцию наблюдателя. .

Создавая проект electronic-forge на основе шаблона реакции, я изменяю файл app.jsx, чтобы он выглядел как

import React from 'react';
import {observer} from 'mobx-react';

@observer export default class App extends React.Component {
  render() {
    return (<div>
      <h2>Welcome to React!</h2>
    </div>);
  }
}

Когда я запускаю приложение, оно выдает ошибку

Uncaught SyntaxError: /home/me/project/src/app.jsx: Unexpected token (4:0)

Где строка 4

@observer export default class App extends React.Component {

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

Как мне использовать Electron Forge с функцией react, mobx и наблюдателями?


electron-forge mobx-react
person mightymouse3062    schedule 25.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  1. Установите пакет babel-plugin-transform-decorators-legacy.
  2. Добавьте transform-decorators-legacy и transform-class-properties в плагины babel.

Пример содержимого файла .compilerc:

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-async-to-generator", "transform-es2015-classes", "react-hot-loader/babel"],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "1.6.0" } }],
          "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-async-to-generator", "transform-es2015-classes"],
        "sourceMaps": "none"
      }
    }
  }
}
person Leksat    schedule 19.02.2018