【Electron 快速入门-5】创建 Electron + React + Ts + Webpack + Electron-builder 项目

我心飞翔 分类:javascript

使用 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('https://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('https://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
 

回复

我来回复
  • 暂无回复内容