Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
1、Windows開發(fā)環(huán)境準(zhǔn)備
開發(fā): Node>=8, Npm>=5, Python>=2
安裝: vc code, git(https://git-scm.com/download), yarn
2京闰、React項(xiàng)目結(jié)合Electron
添加 electron包
yarn add electron
Tip: 報(bào)錯(cuò): Command name was not available. Please run again.
則需要給electron添加淘寶鏡像
vs code的setting.json中添加
"terminal.integrated.env.windows": {
"ELECTRON_CUSTOM_DIR": "8.2.5", // 版本目錄
"ELECTRON_MIRROR": "https://npm.taobao.org/mirrors/electron/" //淘寶鏡像
}
配置 package.json
{
"main": "electron/main.js", // electron啟動(dòng)文件路徑
"scripts": {
"electron": "electron .", // 添加啟動(dòng)腳本
}
}
配置 electron/main.js
const { app, BrowserWindow } = require("electron");
// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時(shí),窗口被自動(dòng)關(guān)閉.
let mainWindow;
function createWindow() {
// 創(chuàng)建瀏覽器窗口
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
},
});
mainWindow.loadURL("http://localhost:3000/");
// 打開開發(fā)者工具
mainWindow.webContents.openDevTools();
// 關(guān)閉window時(shí)觸發(fā)下列事件.
mainWindow.on("closed", function () {
mainWindow = null;
});
}
// Electron會(huì)在初始化完成并且準(zhǔn)備好創(chuàng)建瀏覽器窗口時(shí)調(diào)用這個(gè)方法
// 部分 API 在 ready 事件觸發(fā)后才能使用昆雀。
app.whenReady().then(createWindow);
//當(dāng)所有窗口都被關(guān)閉后退出
app.on("window-all-closed", () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出云石，
// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// 在macOS上研乒，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時(shí)汹忠，
// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
啟動(dòng) Electron
yarn start
yarn electron
3雹熬、Electron-builder打包
添加electron-builder打包工具
yarn add electron-builder
跨平臺(tái)設(shè)置環(huán)境變量cross-env
yarn add cross-env
修改入口文件 electron/main.js
/**為你的應(yīng)用加載index.html
* loadURL 分為兩種情況
* 1.開發(fā)環(huán)境宽菜，指向 react 的開發(fā)環(huán)境地址
* 2.生產(chǎn)環(huán)境，指向 react build 后的 index.html
*/
const startUrl =
process.env.NODE_ENV === "development"
? "http://localhost:3000/"
: url.format({
pathname: path.join(__dirname, "../build/index.html"),
protocol: "file:",
slashes: true,
});
mainWindow.loadURL(startUrl);
修改 package.json
{
"homepage": ".", // electron靜態(tài)文件相對路徑
// 需要把electron和electron-builder放到devDependencies里
"devDependencies": {
"electron": "8.2.5",
"electron-builder": "^22.7.0"
},
"scripts": {
"electron": "cross-env NODE_ENV=development electron .", // 添加dev啟動(dòng)腳本
"electron-pack": "react-scripts build && electron-builder", // 添加electron打包腳本
}
"build": {
"appId": "com.xxx.xxx",
"productName": "react-electron",
"directories": {
"output": "build-electron", // 打包輸出目錄
"buildResources": "public"
},
"files": [ // 可訪問到的文件路徑
"./build/**/*",
"./electron/main.js",
"./package.json"
],
"win": {
"icon": "src/asset/icon.ico"
}
},
}
最后打包即可
yarn electron-pack
