Electronプロジェクト構築、パッケージング実践及びピット回避

プロジェクトアーキテクチャはReact+electronであり、通常のreactプロジェクトを直接使用し、electron構成を加えることができます.Electron構成は、プロジェクトhttps://github.com/electron/electron-quick-start.gitから取得することができる.
パッケージ構成:

まずpackage.jsonにパッケージツール依存

を追加

"devDependencies": {
    "electron-packager": "^14.2.1"
  }

は、以下の構成

を追加する."homepage": "."

package.jsonのscriptsは、次のパッケージコマンド

を追加する.

"package": "electron-packager . demo --platform=darwin --arch=x64 --out=/Users/test/build --electron-version=8.2.3 --overwrite"

注意事項:

--platformはパッケージするプラットフォームを指定することが望ましいが、all

の指定は推奨されない.

--outはbuildとして指定する必要はありません.パッケージ化後にbuildディレクトリがないという問題が発生します.また、ここでは絶対パス

を使用します.

mainを構成する.js

多くのブログで貼られているロードアプリは、このようなものです.

//       index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html')；

あるいはpathパッチを使用しているなど、ファイルが見つからないか、次のようにエラーが発生する可能性があります.

electron Not allowed to load local resource

次の方法を使用します.

mainWindow.loadFile(`./build/index.html`)

また、main.jsにこの独立した方法があれば、

app.on('activate', function () {
    log.info("activate");
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
})

コメントをお勧めします.ここにバグがあります.アプリケーションの起動中にクリックするとエラーが表示されます.

Uncaught Exception:
Error: Cannot create BrowserWindow before app is ready
    at createWindow (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:11:24)
    at App. (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:98:9)
    at App.emit (events.js:210:5)

私はもうelectronにissueを話して、修復すると返事しました.
この方法を使用する場合はappに置きます.whenReady()にあります.