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