6 changed files with 426 additions and 11 deletions
@ -0,0 +1,407 @@
@@ -0,0 +1,407 @@
|
||||
--- |
||||
title: "使用Electron+React开发跨平台桌面应用" |
||||
date: 2019-07-29T19:59:59+08:00 |
||||
draft: false |
||||
toc: true |
||||
tags: [electron, react] |
||||
categories: web |
||||
images: ["img/electron.png"] |
||||
--- |
||||
|
||||
使用Electron开发跨平台桌面应用，已经被越来越多的人接受。从开发者的角度，以前需要很多代码才能做到的自动布局、脏区裁剪、图像栅格化、GPU加速，现在通通不用管了，即使要处理，也是几行代码的事；从企业角度，前端开发人员众多，比较容易招聘，另外，资深前端相对于资深C++客户端，薪资还是有差距的，也节省了不少成本。本文主要着重说明使用Electron+React搭建开发环境的步骤。 |
||||
|
||||
<!--more--> |
||||
|
||||
## 技术栈 |
||||
|
||||
- [**Electron**](https://electronjs.org/) |
||||
- [**React - Create React App**](https://github.com/facebook/create-react-app) |
||||
- [**Rescripts**](https://github.com/harrysolovay/rescripts) |
||||
- [**Electron Builder**](https://github.com/electron-userland/electron-builder) |
||||
|
||||
## 开发环境设置 |
||||
|
||||
创建一个新的React项目 |
||||
|
||||
```shell |
||||
npx create-react-app web-designer-test |
||||
cd web-designer-test |
||||
``` |
||||
|
||||
添加依赖库 |
||||
|
||||
```shell |
||||
yarn add electron wait-on concurrently --dev |
||||
yarn add electron-is-dev |
||||
``` |
||||
|
||||
- electron 用于界面开发的核心框架 |
||||
- electron-builder 用于构建安装包 |
||||
- wait-on concurrently 由于electron需要在react启动之后启动，所以增加这两个库用于同步进程启动顺序 |
||||
- electron-is-dev 判断当前运行环境 |
||||
|
||||
创建文件`public/main.js` |
||||
|
||||
```js |
||||
const electron = require('electron'); |
||||
const app = electron.app; |
||||
const BrowserWindow = electron.BrowserWindow; |
||||
|
||||
const path = require('path'); |
||||
const isDev = require('electron-is-dev'); |
||||
|
||||
let mainWindow; |
||||
|
||||
function createWindow() { |
||||
mainWindow = new BrowserWindow({width: 900, height: 680}); |
||||
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`); |
||||
if (isDev) { |
||||
// Open the DevTools. |
||||
//BrowserWindow.addDevToolsExtension('<location to your react chrome extension>'); |
||||
mainWindow.webContents.openDevTools(); |
||||
} |
||||
mainWindow.on('closed', () => mainWindow = null); |
||||
} |
||||
|
||||
app.on('ready', createWindow); |
||||
|
||||
app.on('window-all-closed', () => { |
||||
if (process.platform !== 'darwin') { |
||||
app.quit(); |
||||
} |
||||
}); |
||||
|
||||
app.on('activate', () => { |
||||
if (mainWindow === null) { |
||||
createWindow(); |
||||
} |
||||
}); |
||||
``` |
||||
|
||||
增加下面的命令到`package.json`文件中的`scripts`标签内 |
||||
|
||||
```js |
||||
"electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"" |
||||
``` |
||||
|
||||
增加入口文件到`package.json`文件中 |
||||
|
||||
```javascript |
||||
"main": "public/main.js" |
||||
``` |
||||
|
||||
到现在为止，`package.json`文件应该类似于下面这样 |
||||
|
||||
```json |
||||
{ |
||||
"name": "web-designer-test", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"dependencies": { |
||||
"electron-is-dev": "^1.1.0", |
||||
"react": "^16.8.7", |
||||
"react-dom": "^16.8.6", |
||||
"react-scripts": "3.0.1" |
||||
}, |
||||
"main": "public/main.js", |
||||
"scripts": { |
||||
"start": "rescripts start", |
||||
"build": "rescripts build", |
||||
"test": "rescripts test", |
||||
"eject": "react-scripts eject", |
||||
"electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"" |
||||
}, |
||||
"eslintConfig": { |
||||
"extends": "react-app" |
||||
}, |
||||
"browserslist": { |
||||
"production": [ |
||||
">0.2%", |
||||
"not dead", |
||||
"not op_mini all" |
||||
], |
||||
"development": [ |
||||
"last 1 chrome version", |
||||
"last 1 firefox version", |
||||
"last 1 safari version" |
||||
] |
||||
}, |
||||
"devDependencies": { |
||||
"concurrently": "^4.1.1", |
||||
"electron": "^5.0.8", |
||||
"wait-on": "^3.3.0" |
||||
} |
||||
} |
||||
|
||||
``` |
||||
|
||||
为了开发环境下，不启动默认浏览器，需要设置`BROWSER`环境变量，在根目录创建`.env`文件 |
||||
|
||||
```ini |
||||
BROWSER=non |
||||
``` |
||||
|
||||
这个时候可以使用下面命令运行程序 |
||||
|
||||
```shell |
||||
yarn electron-dev |
||||
``` |
||||
|
||||
如果在新的程序窗口内出现了React的欢迎页，则表示一切已经准备OK。但是现在JavaScript的运行环境是浏览器，无法访问宿主机的资源，比如读取文件或注册表，所以需要切换到Node.js环境，使用`electron-renderer`作为[Webpack target](https://webpack.js.org/configuration/target/)，我们使用`Rescripts`来处理这个问题。 |
||||
|
||||
安装依赖库 |
||||
|
||||
```shell |
||||
yarn add @rescripts/cli @rescripts/rescript-env --dev |
||||
``` |
||||
|
||||
修改`package.json`文件中`scripts`标签内的启动脚本 |
||||
|
||||
```json |
||||
"start": "react-scripts start", |
||||
"build": "react-scripts build", |
||||
"test": "react-scripts test", |
||||
``` |
||||
|
||||
修改为 |
||||
|
||||
```json |
||||
"start": "rescripts start", |
||||
"build": "rescripts build", |
||||
"test": "rescripts test", |
||||
``` |
||||
|
||||
在根目录新建文件`.rescriptsrc.js` |
||||
|
||||
```javascript |
||||
module.exports = [require.resolve('./.webpack.config.js')] |
||||
``` |
||||
|
||||
最后，在根目录新建另一个文件`.webpack.config.js` |
||||
|
||||
```javascript |
||||
// define child rescript |
||||
module.exports = config => { |
||||
config.target = 'electron-renderer'; |
||||
return config; |
||||
} |
||||
``` |
||||
|
||||
现在就切换到了Node.js运行环境，可以随意访问主机资源了。 |
||||
|
||||
## 打包环境设置 |
||||
|
||||
首先，要添加依赖库 |
||||
|
||||
```shell |
||||
yarn add electron-builder --dev |
||||
``` |
||||
|
||||
CRA(**C**reate **R**eactive **A**pplication)默认创建的`index.html`，会使用绝对路径来访问资源，在Electron中会加载资源失败，所以需要修改配置，在`package.json`中增加`homepage`属性 |
||||
|
||||
```json |
||||
"homepage": "./", |
||||
``` |
||||
|
||||
接下来添加打包命令，在`package.json`中的`scripts`标签中 |
||||
|
||||
```json |
||||
"postinstall": "electron-builder install-app-deps", |
||||
"preelectron-pack": "yarn build", |
||||
"electron-pack": "electron-builder -mw" |
||||
``` |
||||
|
||||
- `"postinstall": "electron-builder install-app-deps"`用于确保本地依赖库都已经安装 |
||||
- `"preelectron-pack": "yarn build"`会保证在打包前构建应用 |
||||
- `"electron-pack": "electron-builder -mw"`会为Mac(m)和Windows(w)平台进行App打包 |
||||
|
||||
在执行打包命令前，还需要设置打包参数，在`package.json`中添加如下信息 |
||||
|
||||
```json |
||||
"author": { |
||||
"name": "lniwn", |
||||
"email": "[email protected]", |
||||
"url": "https://oaoa.me" |
||||
}, |
||||
"build": { |
||||
"appId": "me.oaoa.web-designer-test", |
||||
"productName": "WebDesignerTest", |
||||
"copyright": "Copyright © 2019 ${author}", |
||||
"mac": { |
||||
"category": "public.productivity.utilities" |
||||
}, |
||||
"win": { |
||||
"icon": "assets/icon.png", |
||||
"target": "nsis" |
||||
}, |
||||
"nsis": { |
||||
"allowToChangeInstallationDirectory": true, |
||||
"allowElevation": false, |
||||
"createDesktopShortcut": true, |
||||
"menuCategory": true, |
||||
"oneClick": false |
||||
}, |
||||
"files": [ |
||||
"build/**/*", |
||||
"node_modules/**/*" |
||||
], |
||||
"directories": { |
||||
"buildResources": "assets" |
||||
} |
||||
} |
||||
``` |
||||
|
||||
可以在[这里](https://www.electron.build/configuration/configuration)查看Electron Builder的所有选项。 |
||||
|
||||
创建一个assets文件夹，用于存放图片资源。 |
||||
|
||||
最好在一个平台只构建当前平台的可执行程序，这里针对Windows平台的构建进行了详细设置。 |
||||
|
||||
最终，package.json文件内容如下： |
||||
|
||||
```json |
||||
{ |
||||
"name": "web-designer-test", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"dependencies": { |
||||
"electron-is-dev": "^1.1.0", |
||||
"react": "^16.8.6", |
||||
"react-dom": "^16.8.6", |
||||
"react-scripts": "3.0.1" |
||||
}, |
||||
"main": "public/main.js", |
||||
"homepage": "./", |
||||
"description": "Web页面设计器", |
||||
"scripts": { |
||||
"start": "rescripts start", |
||||
"build": "rescripts build", |
||||
"test": "rescripts test", |
||||
"eject": "react-scripts eject", |
||||
"electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"", |
||||
"postinstall": "electron-builder install-app-deps", |
||||
"preelectron-pack": "yarn build", |
||||
"electron-pack": "electron-builder -mw", |
||||
"electron-pack-win": "electron-builder -c.extraMetadata.main=build/main.js --win --x64" |
||||
}, |
||||
"eslintConfig": { |
||||
"extends": "react-app" |
||||
}, |
||||
"browserslist": { |
||||
"production": [ |
||||
">0.2%", |
||||
"not dead", |
||||
"not op_mini all" |
||||
], |
||||
"development": [ |
||||
"last 1 chrome version", |
||||
"last 1 firefox version", |
||||
"last 1 safari version" |
||||
] |
||||
}, |
||||
"devDependencies": { |
||||
"@rescripts/cli": "^0.0.11", |
||||
"@rescripts/rescript-env": "^0.0.10", |
||||
"concurrently": "^4.1.1", |
||||
"electron": "^5.0.8", |
||||
"electron-builder": "^21.1.5", |
||||
"wait-on": "^3.3.0" |
||||
}, |
||||
"author": { |
||||
"name": "lniwn", |
||||
"email": "[email protected]", |
||||
"url": "https://oaoa.me" |
||||
}, |
||||
"build": { |
||||
"appId": "me.oaoa.web-designer-test", |
||||
"productName": "WebDesignerTest", |
||||
"copyright": "Copyright © 2019 ${author}", |
||||
"mac": { |
||||
"category": "public.productivity.utilities" |
||||
}, |
||||
"win": { |
||||
"icon": "assets/icon.png", |
||||
"target": "nsis" |
||||
}, |
||||
"nsis": { |
||||
"allowToChangeInstallationDirectory": true, |
||||
"allowElevation": false, |
||||
"createDesktopShortcut": true, |
||||
"menuCategory": true, |
||||
"oneClick": false |
||||
}, |
||||
"files": [ |
||||
"build/**/*", |
||||
"node_modules/**/*" |
||||
], |
||||
"directories": { |
||||
"buildResources": "assets" |
||||
} |
||||
} |
||||
} |
||||
|
||||
``` |
||||
|
||||
由于Electron默认入口文件为`build/Electron.js`，如果想自定义，需要在参数中指定入口文件，否则编译会报错 |
||||
|
||||
`"electron-pack-win": "electron-builder -c.extraMetadata.main=build/main.js --win --x64"` |
||||
|
||||
最后，执行打包命令 |
||||
|
||||
```shell |
||||
yarn electron-pack-win |
||||
``` |
||||
|
||||
会在dist文件夹下生成对应安装包 |
||||
|
||||
文件夹结构如下： |
||||
|
||||
```txt |
||||
F:\Project\electron\web-designer-test |
||||
├.env |
||||
├.gitignore |
||||
├.rescriptsrc.js |
||||
├.webpack.config.js |
||||
├assets |
||||
│ ├icon.png |
||||
├build |
||||
│ ├asset-manifest.json |
||||
│ ├favicon.ico |
||||
│ ├index.html |
||||
│ ├main.js |
||||
│ ├manifest.json |
||||
│ ├precache-manifest.3ef21b1d6090801b808aaff5b52f1a17.js |
||||
│ ├service-worker.js |
||||
│ ├static |
||||
├dist |
||||
│ ├.icon-ico |
||||
│ ├builder-effective-config.yaml |
||||
│ ├WebDesignerTest Setup 0.1.0.exe |
||||
│ ├WebDesignerTest Setup 0.1.0.exe.blockmap |
||||
│ ├win-unpacked |
||||
├node_modules |
||||
├package.json |
||||
├public |
||||
│ ├favicon.ico |
||||
│ ├index.html |
||||
│ ├main.js |
||||
│ ├manifest.json |
||||
├README.md |
||||
├src |
||||
│ ├App.css |
||||
│ ├App.js |
||||
│ ├App.test.js |
||||
│ ├index.css |
||||
│ ├index.js |
||||
│ ├logo.svg |
||||
│ ├serviceWorker.js |
||||
├yarn.lock |
||||
|
||||
``` |
||||
|
||||
|
||||
|
||||
*参考文档* |
||||
|
||||
- https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer |
||||
- https://juejin.im/post/5c356a396fb9a049e30848f0 |
||||
Loading…
Reference in new issue