关于electron打包的坑
大大黄、 人气:0首先electron打包的方式有两种
- 通过electron-builder
- 通过electron-package
两种方式,electron-builder打包的话扩展性更强,包也较小,electron-package打出来的包相对扩展性更小,且包容量较大,一般都会选择electron-builder进行打包。
注意electron和electron-build版本的问题
1.两者配套使用,如果两者的包不是配套的,版本不适配那么就会导致打包失败,因此我们使用electron-builder打包的时候一定要注意版本的匹配。
2.其次也要注意我们源码所在文件的位置,路径包括文件名一定不要出现中文,否则也会导致失败。
3.网络问题也是比较坑的点,最好是能用手段让网络通畅,尽量使用yarn , npm去安装依赖包。虽然cnpm也是可以的,但是cnpm和npm yarn还是有区别的,他们载入的包结构是不同的,因此还是建议使用yarn add。 官方也是推荐yarn
4.网络不通畅的情况下,我们下载electron 和 electron-builder就比较费劲。我这里也是通过根目录创建.npmrc文件配置镜像来操作
5.electron和 electron-builder属于开发时依赖项,特别是electron-builder一定要安在devDependencies下
package.json文件
{ "name": "music-react", "version": "0.1.0", "private": true, "description": "create-react-app electron electron-builder dotcoo test", "author": "YJ", "main": "public/electron.js", "homepage": ".", "dependencies": { "@ant-design/icons": "^4.2.2", "@craco/craco": "^5.7.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "antd": "^4.7.0", "axios": "^0.20.0", "immer": "^7.0.14", "normalize.css": "^8.0.1", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-redux": "^7.2.1", "react-router-config": "^5.1.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", "redux": "^4.0.5", "redux-persist": "^6.0.0", "redux-thunk": "^2.3.0", "styled-components": "^5.2.0" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "electron": "cross-env NODE_ENV=development electron .", "pack": "cross-env NODE_ENV=production yarn run build && electron-builder --dir", "dist": "cross-env NODE_ENV=production yarn run build && electron-builder" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "cross-env": "^7.0.2", "electron": "^7.0.0", "electron-builder": "^22.4.0" } }
.npmrc文件
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
electron主进程文件
// 引入模块 const url = require('url'); const path = require('path'); const { app, BrowserWindow } = require('electron'); // 开发环境 const isDev = process.env.NODE_ENV === 'development'; // 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被 // 垃圾回收的时候,window对象将会自动的关闭 let win = null; function createWindow () { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 使用 preload 预加载模块, 可以把 nodeIntegration 禁用掉, 在 preload 阶段是可以访问 node 的, // 这样做是因为即使启用了 node, webpack 在进行打包的时候也不会识别 node 模块和 electron 模块, // nodeIntegration: true, // 使用 proload 预加载注入的模块, 参看下方的 preload.js 文件 preload: path.join(__dirname, './preload.js'), }, }); // 删除菜单 // win.removeMenu(); // 加载index.html文件 win.loadURL(isDev ? 'http://localhost:3000' : url.format({ protocol: 'file', slashes: true, pathname: path.join(__dirname, 'index.html'), })); // 打开开发者工具 isDev && win.webContents.openDevTools(); // 当 window 被关闭,这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 win = null; }); } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow); // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow(); } }); // 在这个文件中,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入。
preload.js文件
// 这里是预加载文件, 即使不开启 nodeIntegration 也可以使用 node 模块, // 我们将需要的模块, 添加到 window 上, 然后再页面中可以从 window 对象上取到需要的模块. window.electron = require('electron'); window.fs = require('fs'); window.express = require('express');
这是基本打包的步骤 此处我打包的项目是react项目 vue的话也有共通之处,最主要还是要避开版本不配套和网路不通畅的坑
加载全部内容