阅读 147

React+Electron 从搭建到发布

准备工作

安装node环境 nodejs.org/zh-cn/ 安装过程不做赘述。

安装react脚手架create-react-appyarn

npm install -g create-react-app yarn
复制代码

创建React项目 脚手架安装完成后,执行以下命令,创建一个名为react-electron-demo的应用

create-react-app react-electron-demo
复制代码

引入Electron

安装 electron

cd react-electron-demo
yarn add electron --dev
yarn add electron-is-dev
复制代码

根目录新建入口文件main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
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')}`);
  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中

"main": "main.js",
"homepage": ".",
复制代码

添加 npm scripts

"electron": "electron .",
复制代码

启动

yarn start
// 新建一个终端
yarn electron
复制代码

启动后效果如图:

优化

使用concurrently并行运行

同时开两个终端有点繁琐,所以可以借助工具concurrently。 安装concurrently

yarn add concurrently --dev
复制代码

添加 npm scripts

"dev": "concurrently \"yarn start\" \"electron .\""
复制代码

禁止启动时在浏览器中打开

根目录新建文件.env,输入:

BROWSER=none
复制代码

保存后重新启动即可

优化启动顺序

由于electron启动需要先等react启动完毕,所以可以使用工具wait-on。 安装wait-on

yarn add wait-on --dev
复制代码

修改npm scripts

"dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\""
复制代码

打包发布

安装electron-builder

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

package.json中添加build字段

"build": {
  "appId": "com.example.electron-cra",
  "files": [
    "build/**/*",
    "node_modules/**/*",
    "public/**/*",
    "main.js"
  ],
  "directories":{
    "buildResources": "assets"
  }
}
复制代码

添加 npm scripts 以windows平台为例,其他平台请参考electron-builder文档

"package": "yarn build && electron-builder -c.extraMetadata.main=main.js --win --x64"
复制代码

打包

yarn package
复制代码

打包后的文件会在dist目录中

此教程的源码已托管在github: github.com/AlanLang/re…

谢谢您的阅读,如发现本文有任何不妥,欢迎指正,不胜感激。

关注下面的标签,发现更多相似文章
评论