關(guān)于electron打包的坑
首先electron打包的方式有兩種
- 通過electron-builder
- 通過electron-package
兩種方式,electron-builder打包的話擴展性更強,包也較小,electron-package打出來的包相對擴展性更小,且包容量較大,一般都會選擇electron-builder進行打包。
注意electron和electron-build版本的問題
1.兩者配套使用,如果兩者的包不是配套的,版本不適配那么就會導致打包失敗,因此我們使用electron-builder打包的時候一定要注意版本的匹配。
2.其次也要注意我們源碼所在文件的位置,路徑包括文件名一定不要出現(xiàn)中文,否則也會導致失敗。
3.網(wǎng)絡(luò)問題也是比較坑的點,最好是能用手段讓網(wǎng)絡(luò)通暢,盡量使用yarn , npm去安裝依賴包。雖然cnpm也是可以的,但是cnpm和npm yarn還是有區(qū)別的,他們載入的包結(jié)構(gòu)是不同的,因此還是建議使用yarn add。 官方也是推薦yarn
4.網(wǎng)絡(luò)不通暢的情況下,我們下載electron 和 electron-builder就比較費勁。我這里也是通過根目錄創(chuàng)建.npmrc文件配置鏡像來操作
5.electron和 electron-builder屬于開發(fā)時依賴項,特別是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');
// 開發(fā)環(huán)境
const isDev = process.env.NODE_ENV === 'development';
// 保持對window對象的全局引用,如果不這么做的話,當JavaScript對象被
// 垃圾回收的時候,window對象將會自動的關(guān)閉
let win = null;
function createWindow () {
? // 創(chuàng)建瀏覽器窗口。
? 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'),
? }));
? // 打開開發(fā)者工具
? isDev && win.webContents.openDevTools();
? // 當 window 被關(guān)閉,這個事件會被觸發(fā)。
? win.on('closed', () => {
? ? // 取消引用 window 對象,如果你的應(yīng)用支持多窗口的話,
? ? // 通常會把多個 window 對象存放在一個數(shù)組里面,
? ? // 與此同時,你應(yīng)該刪除相應(yīng)的元素。
? ? win = null;
? });
}
// Electron 會在初始化后并準備
// 創(chuàng)建瀏覽器窗口時,調(diào)用這個函數(shù)。
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.on('ready', createWindow);
// 當全部窗口關(guān)閉時退出。
app.on('window-all-closed', () => {
? // 在 macOS 上,除非用戶用 Cmd + Q 確定地退出,
? // 否則絕大部分應(yīng)用及其菜單欄會保持激活。
? if (process.platform !== 'darwin') {
? ? app.quit();
? }
});
app.on('activate', () => {
? // 在macOS上,當單擊dock圖標并且沒有其他窗口打開時,
? // 通常在應(yīng)用程序中重新創(chuàng)建一個窗口。
? if (win === null) {
? ? createWindow();
? }
});
// 在這個文件中,你可以續(xù)寫應(yīng)用剩下主進程代碼。
// 也可以拆分成幾個文件,然后用 require 導入。preload.js文件
// 這里是預加載文件, 即使不開啟 nodeIntegration 也可以使用 node 模塊,
// 我們將需要的模塊, 添加到 window 上, 然后再頁面中可以從 window 對象上取到需要的模塊.
window.electron = require('electron');
window.fs = require('fs');
window.express = require('express');
這是基本打包的步驟 此處我打包的項目是react項目 vue的話也有共通之處,最主要還是要避開版本不配套和網(wǎng)路不通暢的坑
到此這篇關(guān)于關(guān)于electron打包的坑的文章就介紹到這了,更多相關(guān)electron打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element?upload上傳帶參數(shù)的實例
這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學習下吧。2017-12-12
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06

