electron打包的坑如何解决

这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何解决”文章能帮助大家解决问题。

两种方式，electron-builder打包的话扩展性更强，包也较小，electron-package打出来的包相对扩展性更小，且包容量较大，一般都会选择electron-builder进行打包。

注意electron和electron-build版本的问题

两者配套使用，如果两者的包不是配套的，版本不适配那么就会导致打包失败，因此我们使用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的话也有共通之处，最主要还是要避开版本不配套和网路不通畅的坑。

关于“electron打包的坑如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。