带有mobx-react观察者的电子伪造模板

Question

我最近开始尝试使用Electron Forge，我认为它是一个很棒的工具。我还对mobx-react包做了一些工作，并一直在使用观察者特性。

基于react模板创建一个电子伪造项目，我将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这样的东西来编译所有的东西，这样它就可以正常运行了。基于项目的description，我不需要担心webpack。

如何将Electron Forge与react、mobx和观察者功能一起使用？

Answer 1

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"
      }
    }
  }
}