electron打包

最新推荐文章于 2025-04-11 23:35:37 发布

qq_52959938

最新推荐文章于 2025-04-11 23:35:37 发布

阅读量237

点赞数 2

文章标签： electron javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52959938/article/details/145923035

版权

我只打了win包，另外两种没打，不过一样的，更改一下package-win里面的命令就可以了

1.创建文件

# 安装 
npm install -g create-react-app
# 创建 react项目
create-react-app react-electron
# 启动项目 可以看见浏览器打开了3000端口
cd react-electron && npm start

2.安装electron

npm install -save electron

3.安装打包依赖electron-packager

npm install electron-packager --save-dev

4.main.js文件

// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow
 
function createWindow () {
//创建浏览器窗口,宽高自定义具体大小你开心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
 
    //打包以后的
    // mainWindow.loadURL(url.format({
    //     pathname: path.join(__dirname, './build/index.html'),
    //     protocol: 'file:',
    //     slashes: true
    // }))
 

  mainWindow.loadURL('http://localhost:3000/');//一开始在本地运行的
  
  // 开发者工具
  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

5.package.json文件

{
  "name": "react-electron",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",//加上
  "homepage": ".",//加上
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "electron": "^34.3.0",
    "electron-packager": "^17.1.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron .",//加上
    "package-win": "electron-packager /zpersonDemo/react-electron react-electron-app --platform=win32 --arch=x64 --out=dist"//加上
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}