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

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

 更新時間:2023年03月01日 11:07:14   作者:大大黃、  
本文主要介紹了關(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)絡問題也是比較坑的點,最好是能用手段讓網(wǎng)絡通暢,盡量使用yarn , npm去安裝依賴包。雖然cnpm也是可以的,但是cnpm和npm yarn還是有區(qū)別的,他們載入的包結(jié)構(gòu)是不同的,因此還是建議使用yarn add。 官方也是推薦yarn
4.網(wǎng)絡不通暢的情況下,我們下載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 對象,如果你的應用支持多窗口的話,
? ? // 通常會把多個 window 對象存放在一個數(shù)組里面,
? ? // 與此同時,你應該刪除相應的元素。
? ? 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 確定地退出,
? // 否則絕大部分應用及其菜單欄會保持激活。
? if (process.platform !== 'darwin') {
? ? app.quit();
? }
});

app.on('activate', () => {
? // 在macOS上,當單擊dock圖標并且沒有其他窗口打開時,
? // 通常在應用程序中重新創(chuàng)建一個窗口。
? if (win === null) {
? ? createWindow();
? }
});

// 在這個文件中,你可以續(xù)寫應用剩下主進程代碼。
// 也可以拆分成幾個文件,然后用 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中的$set的使用實例代碼

    Vue中的$set的使用實例代碼

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

    Vue中的event對象介紹

    這篇文章介紹了Vue中的event對象,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-03-03
  • vue踩坑記錄:屬性報undefined錯誤問題

    vue踩坑記錄:屬性報undefined錯誤問題

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

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

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

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

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

    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問題

    這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue 點擊按鈕增加一行的方法

    vue 點擊按鈕增加一行的方法

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

    Vue3 插槽使用匯總

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

    vue2中使用AntV?以g2plot為實例

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

最新評論