安裝node
環境 nodejs.org/zh-cn/ 安裝過程不作贅述。html
安裝react
腳手架create-react-app
和yarnnode
npm install -g create-react-app yarn
複製代碼
建立React
項目 腳手架安裝完成後,執行如下命令,建立一個名爲react-electron-demo
的應用react
create-react-app react-electron-demo
複製代碼
Electron
安裝 electron
git
cd react-electron-demo
yarn add electron --dev
yarn add electron-is-dev
複製代碼
根目錄新建入口文件main.js
github
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中npm
"main": "main.js",
"homepage": ".",
複製代碼
添加 npm scripts
json
"electron": "electron .",
複製代碼
啓動windows
yarn start
// 新建一個終端
yarn electron
複製代碼
啓動後效果如圖: 瀏覽器
concurrently
並行運行同時開兩個終端有點繁瑣,因此能夠藉助工具concurrently
。 安裝concurrently
bash
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…
謝謝您的閱讀,如發現本文有任何不妥,歡迎指正,不勝感激。