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

安装babel-plugin-transform-decorators-legacy包。
将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"
      }
    }
  }
}

具有mobx反应观察者的Electron Forge模板

1 个答案: