快捷導(dǎo)航

React Electron生成桌面應(yīng)用過(guò)程

更新時(shí)間：2022年12月07日 14:18:14 作者：Volon Kou

這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

一、創(chuàng)建react項(xiàng)目

首先使用creat-react-app腳手架來(lái)創(chuàng)建一個(gè)react項(xiàng)目

# 安裝 create-react-app 命令,如果已將安裝請(qǐng)忽略
npm install -g create-react-app
# 創(chuàng)建 react項(xiàng)目
create-react-app react-electron
# 啟動(dòng)項(xiàng)目( create-react-app 真的超級(jí)方便啊)
cd react-electron && npm start

npm start之后瀏覽器會(huì)自動(dòng)打開(kāi)網(wǎng)址 http://localhost:3000/ ，出現(xiàn)react項(xiàng)目的頁(yè)面了

二、安裝Electron

#在react-electron項(xiàng)目目錄下
npm install -save electron

三、配置文件

1.在項(xiàng)目根目錄新建main.js

const { app, BrowserWindow } = require("electron")
const path = require('path')
const url = require('url')
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    minWidth: 800,
    minHeight: 800
  })
  win.loadURL("http://localhost:3000/")
}
app.whenReady().then(() => {
  createWindow()
  app.on("active", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})

2.配置package.json

添加如下兩項(xiàng)配置：
{
	"main": "main.js", // 配置electron的啟動(dòng)文件
	"scripts": {
	    "electron-start": "electron ."
	  },
  }

3.啟動(dòng)electron

# 這里要打開(kāi)兩個(gè)窗口

# 啟動(dòng)react項(xiàng)目
npm start
# 啟動(dòng)electron
npm run electron-start

npm run electron-start之后會(huì)自動(dòng)出現(xiàn)桌面應(yīng)用

四、打包Electron桌面應(yīng)用

安裝 electron-packager

npm install electron-packager -D

** 配置homePage字段**在package.json文件中添加如下配置

{
	"homepage": "."
}

{
	"script": {
		"package": "electron-packager ./build react-electron --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
	}
}
//mac系統(tǒng) --platform=darwin
//Windows系統(tǒng) --platform=win32

然后打包react代碼，根目錄會(huì)多出一個(gè)build文件夾

npm run build

將main.js和package.json兩個(gè)文件復(fù)制到build文件夾下，同時(shí)修改build文件夾下的main.js

// 加載應(yīng)用----electron默認(rèn)的打包入口
win.loadURL(url.format({
  pathname: path.join(__dirname, './index.html'), // 修改這里
  protocol: 'file:',
  slashes: true
}))

在根目錄運(yùn)行打包命令

npm run package

到此這篇關(guān)于React Electron生成桌面應(yīng)用過(guò)程的文章就介紹到這了,更多相關(guān)React Electron桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: