electron打包的坑如何解決

這篇文章主要介紹“electron打包的坑如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“electron打包的坑如何解決”文章能幫助大家解決問題。

兩種方式，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的話也有共通之處，最主要還是要避開版本不配套和網路不通暢的坑。

關于“electron打包的坑如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。