开发 React Electron App 的第一步

时运命 發表於 2021-3-30 14:20:00

在此记录一下如何用 React + Electron 开发一个最基本的桌面程序。
看似简单，其实过程中是有不少坑的，不是几句 <code>npm install</code> 就能搞定的。
本文以 Windows 为运行环境。
<h2 id="create-react-app">Create React App</h2>
创建 React 项目还是用最方便的 cli 工具 create-react-app:
<pre><code class="language-bash">npx create-react-app react-electron-app
</code></pre>
<h2 id="add-electron">Add Electron</h2>
接下来除了添加 electron 本体，有几个包也可算是必备的，一并添加：
<pre><code class="language-bash">yarn add electron electron-builder --dev
yarn add electron-is-dev
</code></pre>
注意，electron 和 electron-builder 需要放在 <code>"devDependencies"</code> 中，否则以后无法打包。
<h2 id="启动开发">启动开发</h2>
在开始开发前，必须要先配置一下<code>package.json</code>, 让 react 和 electron 都能运行起来进行开发。
首先加入 electron 的入口脚本：
<pre><code class="language-json">"main": "./public/electron.js"
</code></pre>
将入口文件 <code>electron.js</code> 放在 react 的 public 文件夹下，public 文件夹会在 React 进行 build 后被复制到 build 文件夹中。
接着，对 <code>"scripts"</code> 进行修改：
<pre><code class="language-json">"scripts": {
"start": "set BROWSER=none && react-scripts start",
"electron": "electron .",
"postinstall": "electron-builder install-app-deps"
}
</code></pre>
<code>"start"</code> 脚本修改后，react 进行开发时，就不会打开浏览器了。<code>"postinstall"</code> 确保其他依赖始终符合当前 electron 的版本。
接下来要创建入口文件 <code>electron.js</code> , 使程序运行起来。
<h2 id="electron-entry">Electron Entry</h2>
创建 <code>electron.js</code> 并进行最基本的设置：
<pre><code class="language-jsx">const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

const createWindow = () => {
// 创建程序窗口，有关选项可参考：[(https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions)](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions)
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});

// isDev 判断是开发模式还是产品模式，开发模式读取本地服务器，非开发模式读取 React 生成文件的 index.html 文件。
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', () => mainWindow = null);
};

app.whenReady().then(() => {
createWindow();
});
</code></pre>
<code>preload</code> 是程序启动前的预加载文件，我们可以在 <code>preload.js</code> 中执行一些自己的加载脚本。建议在其中设定渲染进程和主进程之间的通信 API.
接下来，先运行 <code>yarn run start</code> 启动 React，再运行 <code>yarn run electron</code>, 即可打开 electron 的程序进行开发调试。
<h2 id="build">Build</h2>
之前是开发模式，当开发完成后，我们希望有像模像样的应用程序可执行文件时，就得执行以下步骤。
首先，我们要为 React 程序在 <code>package.json</code> 添加 homepage 配置，以避免 React 程序误用绝对路径而报错：
<pre><code class="language-json"> "homepage": "./"
</code></pre>
接着，我们将 React 程序 build 出来：
<pre><code class="language-bash">yarn run build
</code></pre>
这里特别注意，当 React build 之后，<code>"dependencies"</code> 中 React 的相关依赖就不会在 build 中起作用了，因为他们已经被 webpack 打包压缩了。而 Electron build 时，还会打包这些不会用到的 React 相关依赖，这会使 app 体积变得很大，我们要做的就是把这些依赖移到 <code>"devDependencies"</code> 中去：
<pre><code class="language-json">"dependencies": {
"electron-is-dev": "^2.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"electron": "^12.0.2",
"electron-builder": "^22.10.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
</code></pre>
electron-is-dev 由于在 <code>electron.js</code> 中要 require 到，所以不要动。
接下里在此修改 <code>package.json</code>, 将打包脚本加进去：
<pre><code class="language-json">"scripts": {
"electron-pack": "electron-builder --dir",
"electron-dist": "electron-builder",
}
</code></pre>
其中，electron-pack 打包生成的是不需要安装可直接执行的程序，electron-dist 是生成安装包。
现在我们 build 的话，程序会以 <code>package.json</code> 中的 name 来命名，如要自定义，可在 <code>package.json</code> 中添加：
<pre><code class="language-json">"build": {
"productName": "ReactElectronApp"
}
</code></pre>
好了，万事具备，现在可以打包了——然后进入 dist 文件夹看看吧。
当然，距离真正的 app 完成品，这不过是万里长征的第一步罢了。 
来源：https://www.cnblogs.com/seesawgame/p/14596600.html

頁: [1]

琼殿技术论坛's Archiver

开发 React Electron App 的第一步