【Electron 快速入門-5】建立 Electron + React + Ts + Webpack + Electron-builder 項目

使用 create-react-app 建立 React + Ts 項目

• 執行建立

npx create-react-app electron-demo --template typescript
複製代碼

• 運行

yarn start
複製代碼

添加 Electron

安裝依賴

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn add electron -D
複製代碼

建立主進程入口文件

在前面「建立最簡單的 Electron」應用中，咱們在根目錄下新建了 main.ts 做爲主進程入口文件。

爲了更加貼切 Web 開發，咱們項目以 Web 爲主首先建立了 Web。所以，咱們建立 electron 目錄，存放與 Electron 主進程相關內容。

新建 electron/main.ts 文件。

編譯與啓動主進程

前面，咱們提到在 electron 開發中分爲主進程與渲染進程, 二者屬於不一樣進程，能夠看做是不一樣的 bundle。

• 渲染進程中，咱們 tsc 的編譯 module 能夠是 esnext
• 在主進程中（Node），module 則爲 commonjs

固然，因爲咱們的前端是運行在 electron(具有 node)，咱們也能夠直接使用同一個 tsconfig 配置文件, module 配置爲 commonjs。

• 編譯與啓動主進程

若是咱們指望我們的項目，既能夠獨立部署 web ，也能夠構建 electron 的時候，則須要進行區分。

web 開啓 node 能力

在 electron 環境中，咱們的 web 是可使用 node 能力的，但咱們須要作一些編譯配置。

• Web 開啓 node 能力

運行 electron

主進程實現打開窗口

在 electron/main.ts 中：

import { app, BrowserWindow } from 'electron';



function createWindow () {

 // 打開窗口

 const win = new BrowserWindow({

 width: 800,

 height: 600,

 webPreferences: {

 nodeIntegration: true,// 打開 node 選項

 contextIsolation: false // v12 中關閉此選項以得到在窗口中使用 node 的能力

 }

 })



 win.loadURL('http://localhost:3000')

 };



app.whenReady().then(() => {

 createWindow();

 });
複製代碼

啓動與運行

yarn start # 啓動前端（electron 渲染進程）

yarn dev:main # 啓動 electron 主進程
複製代碼

前端運行在 Electron 裏的時候，咱們能夠把前端部分叫作：渲染進程

構建

主進程 Webpack 處理

• Webpack 處理主進程

添加 electron-builder 依賴

yarn add electron-builder -D
複製代碼

添加 electron-builder 配置文件

咱們在構建 Electron 以前，有這些環節：

• 構建渲染進程 bundle
• 構建主進程 bundle

所以，在 Electron 構建中，咱們會把上述產物複製到應用中，上述產物通過咱們上面的配置，存在於：

• 渲染進程 bundle => ./dist
• 主進程 bundle => ./electron-main

新建 config/builder.js, 並複製主進程、渲染進程 bundle:

module.exports = {

  asar: false,

  extends: null, // fix bug https://github.com/electron-userland/electron-builder/issues/2030

  publish: {

    provider: 'generic',

    url: '',

  },

  files: [

    {

      from: './build',

      to: './build'

    }, {

      from: './.electron-main',

      to: './electron'

    },

    {},

  '!node_modules',

  'package.json'

  ],

};
複製代碼

package.json 相關配置

• 修改前端靜態資源相對位置

{

    "homepage": ".",

}
複製代碼

• 修改主進程入口文件

{

    "main": "./electron/main.prod.js",

}
複製代碼

• 添加打包相關命令

{

   "scripts": { 

    "build:renderer": "react-app-rewired build",

    "build:main": "webpack --config ./config/webpack.main.js",

    "pack:electron": "yarn build:renderer && yarn build:main && electron-builder build --publish never --config ./config/builder.js",

  }

}
複製代碼

修改窗口加載路徑

在開發的時候，咱們窗口加載 webpack-dev-server 地址:

win.loadURL('http://localhost:3000')
複製代碼

打包後，咱們加載的是本地 html 文件，即編譯後的地址，好比：咱們編譯後的入口 html 地址爲：

build

├── asset-manifest.json

├── favicon.ico

├── index.html

├── ...
複製代碼

• build/index.html

基於上面構建配置中，咱們配置的拷貝地址：

{

      from: './build',

      to: './build'

    }
複製代碼

所以，咱們加載的路徑是：

const isDev = process.env.NODE_ENV === 'development';

win.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '..')}/build/index.html`)
複製代碼

打包測試

執行 yarn pack:electron, 默認產物在 dist 目錄下：

├── builder-debug.yml

├── builder-effective-config.yaml

├── electron-tech-demo-0.1.0-mac.zip

├── electron-tech-demo-0.1.0.dmg

├── electron-tech-demo-0.1.0.dmg.blockmap

├── latest-mac.yml

└── mac

    └── electron-tech-demo.app
複製代碼