react electron搭建 桌面应用（Window）

创建一个React项目

使用 create-react-app 快速创建一个 react-electron-demo 项目

# 安装 create-react-app
npm install -g create-react-app
# 创建 react-electron-domo
create-react-app react-electron-demo
# 安装 npm 包
cd react-electron-demo && yarn
# 启动
yarn start
复制代码

默认启动端口 3000 启动成功界面

electron（软件框架）

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。(摘自维基百科)

安装 electron
yarn add electron --dev
复制代码

修改配置文件

在 react-electron-demo 根目录（和package在一个目录），创建一个main.js

与 electron-quick-start 中的 main.js 基本一致。

修改 mainWindow.loadURL('http://localhost:3000/');

配置 package.json

{
"name": "react-electron-demo",
"version": "0.1.0",
"private": true,
"main": "main.js", // 配置启动文件
"homepage": ".", // 静态文件路径变为相对路径
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-start": "electron ." // 配置electron启动
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"electron": "^3.0.11"
},
"dev":true // 是否为dev标记
}
复制代码

启动 electron

yarn electron-start
复制代码

启动成功界面

打包

打包react项目

yarn build
复制代码

生成一个build文件夹，里面有 index.html 入口文件

修改 main.js

...
const pkg = require('./package.json');
...
if (pkg.dev) {
// 加载执行好的文件
mainWindow.loadURL('http://localhost:3000/')
} else {
// 加载打包好的文件
mainWindow.loadURL(`file://${__dirname}/build/index.html`)
}
复制代码

打包electron(for Windows)

安装 electron-packager

yarn add electron-packager --dev
复制代码

electron-packager 命令

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>
参数说明：
sourcedir：项目所在路径
appname：应用名称
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
architecture：决定了使用 x86 还是 x64 还是两个架构都用
electron version：electron 的版本
optional options：可选选项
详细参数说明
1 rimraf 一个豪华版本的rm -rf，兼容window。
2 cross-env 一个豪华版本的环境变量设置，有NODE_ENV=*的地方，就可以考虑使用cross-env，兼容window。
3 ./，一般为package.json的位置。具体可以见这里：https://newsn.net/say/electron-quick-start-modify.html
4 appname，这个会影响你打包完毕的可执行文件（exe/dmg）的名字（appname.exe）。
5 --platform和--arch，这两个参数有非常多的变形。这里有详细解释：https://newsn.net/say/electron-packager-basic.html
6 --win32metadata.FileDescription，文件描述信息。见这里：https://newsn.net/say/electron-packager-exe-info.html
7 --overwrite，是否覆盖原有的生成文件。它和下面几项有关系：--out=out、--ignore=out、rimraf out。
8 --no-prune，这个参数请慎用，是说不处理node_modules里面dev依赖包，把相关的代码都放进最终asar里面。默认情况下，是会将dev相关的node_modules里面的包给去除之后，再打包的。注意：目前的最新版electron-packager里面没有--prune参数。
9 --electron-version，指定打包时使用的electron的版本。见这里：https://newsn.net/say/electron-packager-control-version.html 。注意：最新版的electron-packager没有--version参数。
10 --out打包完的可执行文件，放在在哪里。
11 --icon设置打包的时候的图标。敲黑板重点，天天有人问如何更换这个图标，就这里更换。图标制作的问题，请参见：https://newsn.net/say/electron-mac-icns.html 和 https://newsn.net/say/electron-ico-format.html
。图标都是特制的图标，妄图不制作图标就能完美无缺更换的想法，都是徒劳的。千万牢记。
12 --asar打包选项，是否在resource文件夹下面，生成app.asar文件。否则将会是个app文件夹加上自己的代码文件。
13 --ignore，要排除掉的不打包的文件，可以叠加效果。主要是出于减少最终文件大小的考虑。
14 --extra-resource，可以将第三方资源，在打包的时候，复制到app.asar的同级目录。
复制代码

打包 在package.json 添加

"scripts": {
"packageWin": "electron-packager ./ myapp --platform=win32 --arch=x64 --out ./OutApp --asar --app-version=0.1.0 --overwrite --icon=./app/img/icon/icon.ico"
}
复制代码

electron 结合 react 开发

遇到的问题： 在react中无法使用electron require('electron') 报错误 fs.existsSync is not a function 因为react中无法使用node.js的模块

创建预加载JS文件 render.js

在 public/ 目录新建render.js文件

# render.js
global.electron = require('electron')
复制代码

修改main.js

mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
javascript: true,
plugins: true,
nodeIntegration: false,
webSecurity: false,
preload: path.join(__dirname, ',.public/render.js')
}
})
复制代码

修改 public/index.html

<script>require('./render.js')</script>
<div id="root"></div>
复制代码

在 React 使用 electron

const electron = window.electron;
复制代码