mobx-react - 带有 mobx-react 观察者的 Electron Forge 模板

Question

我最近开始使用Electron Forge，我认为它是一个很棒的工具。我也一直在使用mobx-react包做一些工作，并且一直在使用观察者功能。

基于 react 模板创建一个 electron-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 之类的东西来编译所有东西，以便它正常运行。根据项目的描述，我不需要担心 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"
      }
    }
  }
}