mobx-react observerを使用したElectron Forgeテンプレート

Question

私は最近Electron Forgeで遊び始めました。私はそれが素晴らしいツールだと思います。私はまた、mobx-reactパッケージでいくつかの作業をしており、オブザーバー機能を使用しています。私は

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

とアプリケーションのそれのエラーを実行すると、テンプレートを反応に基づいて電子鍛造プロジェクトの作成

は、私が

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>); 
    } 
} 

に見えるようにapp.jsxファイルを変更します4行目は

@observer export default class App extends React.Component { 

私が過去にプレイしたことから、w ebpackがすべてをコンパイルして正しく動作するようにします。プロジェクトのdescriptionに基づいて、私はwebpackについて心配する必要はありません。

react、mobx、およびオブザーバー機能を使用してElectron Forgeを使用するにはどうすればよいですか？

Answer 1

1. babel-plugin-transform-decorators-legacyパッケージをインストールします。
2. バベルプラグインにtransform-decorators-legacyとtransform-class-propertiesを追加します。 .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" 
     } 
    } 
    } 
}