電子にcreate-react-appを組み込む

Question

私は試してみて、あまりにも頻繁にStackOverflowに頼ることはありませんが、これは私をナットにしています。私は、電子フレームワークにラップしようとしているcreate-react-appを持っています。私はチュートリアルのオンラインを発見しました。基本的には、barebones webpack config setupを使って最初からすべてを作成していますが、それは動作しますが、電子アプリケーションを起動する前にまずwebpack dev serverを起動してください。これは、package.json起動スクリプトが "electron"というコマンドを1つ実行するだけなので、アプリケーションをパッケージ化する場合は冗長です。では、私のReactアプリケーションの静的プロダクションファイルをElectronに含めるにはどうすればいいですか？私はこれまでに何度も成功しなかったことを試してきました。私が来たのは、main.jsのエントリファイル内で静的な反応index.htmlファイルを指していたのです。問題が発生したのは、それが生産ビルドであったため、すべてが小型化されていたからです。このファイル内のリソースを正しくロードするためには、どのsrc URLからも最初の "/"をすべて手動で削除する必要がありました。

だから、私は、実際の質問があると思います：

どのように私は正しくアプリケーションので、電子負荷にそれに反応する静的ファイルを「奉仕」のか？

PS（私はCSSのモジュールを利用するためにアプリケーションを排出ことに注意してもかかります）：反応する電子チュートリアルへのリンクを - あなたが持っているチュートリアルのロジックによってhttps://medium.com/@Agro/developing-desktop-applications-with-electron-and-react-40d117d97564

Answer 1

静的ファイルを/publicフォルダに入れるには、アセットはHTMLドキュメントからrelativをロードされますが、src URLから最初の "/"をすべて手動で削除しなければならないパスと同じ問題が発生します。 URLはビルド時に正しい必要があります。

このチュートリアルでは、電子開発の悪い習慣を奨励していると言いました。私はそれがあなたの問題の一部だと考えています。

node_modulesパスから電子を決して開始しません。 electron ./path/to/electronscriptsfolderでこれを行うと、アプリケーション定義を含むこのフォルダにindex.js/main.jsがロードされます。

Webpackはバンドルや電子パッケージングの必要がないため、間違った電子メールです.Webpackはネイティブのパッケージやパスに問題が発生する傾向があります。あなたの電子特定のロジックでそれを行うにはelectron-compileまたはgulpパイプラインを使用します。

電子にとって非常に重要であるにもかかわらず、バーベルの構成はありません。基本的には、特定のノードバージョンで動作する電子用と、特定の実装で動作するクロム用の2つのベブル構成が必要です。ここ

クロム59とのNode.js 8.2.1

Renderprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "chrome": "59" 
     } 
    }] 
    ] 
} 

Mainprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "node": "8.2.1" 
     } 
    }] 
    ] 
} 

使用する電子1.8.1たとえば