react electron搭建桌面应用（Window）-CSDN博客

创建一个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;
复制代码