【Electron】Electron+React環境構成

前言

これは小道具を作ることができるとか、実用的な感じがします.勉強してみましょう.

インストール

は、まず基本的なインストールです.

create-react-appを使用してプロジェクトを作成します.

electron

をインストール

cnpm i electron -D

electron-is-dev

をインストール

cnpm i electron-is-dev -D

ルートディレクトリの下でmianを記述する.js.

const {
     app,BrowserWindow}=require('electron')
const isDev = require('electron-is-dev')
let mainWindow
app.on('ready',()=>{
     
    mainWindow=new BrowserWindow({
     
        width:1024,
        height:680,
        webPreferences:{
     
            nodeIntegration:true
        }
    })
    const urlLocation =isDev? 'http://localhost:3000':'xxxxx'//cra    3000  
    mainWindow.loadURL(urlLocation)
})

packageを作成する.json,加入命令:

 "dev":"electron ."

electronエントリを同時に構成する:(package.jsonでもある)

"main": "main.js",

その後、craを直接npm startで実行し、Webページが起動すると、新しいcmdを開いてnpm run devを起動します.

react+electronのウィンドウが表示されます~~~

構成の最適化

同時に2 cmdを開始するのは不便で、react-dev-toolを加えると自動的にページが開くので、この構成を最適化して、1つのコマンドを入力すれば、自動的に上記のプロセスを完了させる必要があります.

cocurrentlyをインストールし、2つのコマンドを並列に実行できます.

cnpm i concurrently -D

wait-onをインストールします.このツールは、コマンドが完了するまで次の

に進むことができます.

cnpm i wait-on -D

cross-envをインストールし、異なるマシン上の環境の異なる問題を解決します.

cnpm i cross-env -D

packageを書き直す.jsonの起動コマンド:

  "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""

これで完璧です.

一般的にインストールする

devtronはコンソールにデバッグバーを追加することができ、electronに追加されたipcのような状態が見えます.

npm install electron-store -S

コードに導入:

app.on('ready',()=>{
     
    require('devtron').install()
    mainWindow=new BrowserWindow({
     
        width:1024,
        height:680,
        webPreferences:{
     
            nodeIntegration:true
        }
    })
    const urlLocation =isDev? 'http://localhost:3000':'xxxxx'
    mainWindow.loadURL(urlLocation)
})

electron-storeは、データを永続化することができる.一般的に永続化データはここに保存されます.

npm install electron-store -S

electron-builder最終パッケージングツール

npm install electron-builder -D