欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于electron打包的坑

 更新時(shí)間:2023年03月01日 11:07:14   作者:大大黃、  
本文主要介紹了關(guān)于electron打包的坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

首先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中的$set的使用實(shí)例代碼

    Vue中的$set的使用實(shí)例代碼

    這篇文章主要介紹了Vue中的$set的使用,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-10-10
  • Vue中的event對(duì)象介紹

    Vue中的event對(duì)象介紹

    這篇文章介紹了Vue中的event對(duì)象,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題

    vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題

    這篇文章主要介紹了vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue+element?upload上傳帶參數(shù)的實(shí)例

    vue+element?upload上傳帶參數(shù)的實(shí)例

    這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue源碼之批量異步更新策略的深入解析

    vue源碼之批量異步更新策略的深入解析

    這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料,關(guān)于vue異步更新是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能,需要的朋友可以參考下
    2021-05-05
  • vue的無(wú)縫滾動(dòng)組件vue-seamless-scroll實(shí)例

    vue的無(wú)縫滾動(dòng)組件vue-seamless-scroll實(shí)例

    本篇文章主要給大家講解了vue的無(wú)縫滾動(dòng)組件vue-seamless-scroll的用法,需要的朋友參考學(xué)習(xí)下吧。
    2017-12-12
  • vue cli 3.0下配置開(kāi)發(fā)環(huán)境下的sourcemap問(wèn)題

    vue 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
  • vue 點(diǎn)擊按鈕增加一行的方法

    vue 點(diǎn)擊按鈕增加一行的方法

    今天小編就為大家分享一篇vue 點(diǎn)擊按鈕增加一行的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue3 插槽使用匯總

    Vue3 插槽使用匯總

    這篇文章主要給大家分享了Vue3的 插槽使用匯總,在 2.6.0中,vue 為具名插槽和作用于插槽引入了一個(gè)新的統(tǒng)一語(yǔ)法:v-slot。它取代了 slot 和 slot-scope 在新版中的應(yīng)用,下面就一起來(lái)看看文章的詳細(xì)內(nèi)容吧
    2021-12-12
  • vue2中使用AntV?以g2plot為實(shí)例

    vue2中使用AntV?以g2plot為實(shí)例

    這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論