国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

electron打包：electron-packager及electron-builder兩種方式實

KaltZK / 3210人閱讀

摘要：前言本文主要介紹如何通過及兩種方式，將已有的應用打包成格式和可執行文件。導致了在打包的過程中非常慢。由于是初次接觸，如讀者在文中發現錯誤，請及時指正。

前言

本文主要介紹如何通過electron-packager及electron-builder兩種方式，將已有的electron應用打包成msi格式和exe可執行文件。打包是一個成熟的應用程序一個重要的環節，希望這篇文章可以給大家一些參考，最后會講到打包時遇到的一些坑，與大家分享。

本文適用于有一些electron實踐經驗的小伙伴，知道如何創建一個簡單的electron應用，并且知道electron主進程、渲染進程間如何通信。

electron-packager

使用命令 npm install electron-packager --save-dev 安裝好之后會在package.json中的devDependencies生成代碼:

"devDependencies": {
    "electron-packager": "^9.1.0"
}
注意：
1、打包時要分清devDependencies與dependencies的區別，文章后會講。
2、package.json 的額外字段 —— productName、author 和 description，雖然這幾個字段并不是打包必備的，但它們會在 Windows 的 Squirrel 安裝包（用于自動更新）中使用到，所以請讀者根據實際情況添加。

安裝好模塊之后，就可以對應用進行打包。electron-packager的打包基本命令是：

electron-packager

參數說明：

sourcedir：項目所在路徑

appname：應用名稱

platform：確定了你要構建哪個平臺的應用（Windows、Mac 還是 Linux）

architecture：決定了使用 x86 還是 x64 還是兩個架構都用

electron version：electron 的版本

optional options：可選選項

為了方便起見，在package.json中添加代碼：

"scripts": {
    "package": "electron-packager ./ myapp --out ./OutApp --version 1.7.9 --overwrite --icon=./app/img/icon/icon.ico"
  }

然后在命令行中執行npm run package

打包成功后，會在OutApp目錄（此處的目錄是在參數中配置的）下生成.exe，運行該文件，并且沒有報錯，則說明本次打包成功。

特點：
1、支持平臺有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、進行應用更新時，使用electron內置的autoUpdate進行更新
3、支持CLI和JS API兩種使用方式；
electron-builder

首先來看看什么是electron-builder，來自官方的解釋：

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.

簡單的說，electron-builder就是有比electron-packager有更豐富的的功能，支持更多的平臺，同時也支持了自動更新。除了這幾點之外，由electron-builder打出的包更為輕量，并且可以打包出不暴露源碼的setup安裝程序。考慮到以上幾點，我果斷選擇了electron-builder       （微笑

首先，依舊是安裝依賴。
（這里官方強烈推薦使用yarn安裝依賴包，但我使用了npm安裝的依賴也可以正常打包，所以至于為什么官方強烈推薦用yarn，我還沒搞懂其原因，還請了解緣由的大佬們賜教）

yarn add electron-builder --save-dev

在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

在命令行中執行npm run dist ，執行結果如下：

打包后在dist目錄生成如下文件：

解壓zip包或執行setup安裝文件，應用啟動后且沒有報錯，則說明本次打包成功。

特點：
1、electron-builder 可以打包成msi、exe、dmg文件，macOS系統，只能打包dmg文件，window系統才能打包exe，msi文件；
2、幾乎支持了所有平臺的所有格式；
3、支持Auto Update；
4、支持CLI和JS API兩種使用方式；
坑

研究electron打包的過程中踩了不少坑，打包涉及到不少系統級別的問題，從最初的選型到最后的成功打包，看似是個簡單的過程，但其中仍有一些需要注意到的地方，我在這里分兩點說明：

devDependencies與dependencies的區別

dependencies 表示我們要在生產環境下使用該依賴，devDependencies 則表示我們僅在開發環境使用該依賴。在打包時，一定要分清哪些包屬于生產依賴，哪些屬于開發依賴，尤其是在項目較大，依賴包較多的情況下。若在生產環境下錯應或者少引依賴包，即便是成功打包，但在使用應用程序期間也會報錯，導致打包好的程序無法正常運行。

npm與cnpm的區別

說到npm與cnpm的區別，可能大家都知道，但大家容易忽視的一點，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。一下子node_modules展開后有非常多的文件。導致了在打包的過程中非常慢。但是如果改用npm來安裝node_modules的話，所有的包都是樹狀結構的，層級變深。

由于這個不同，對一些項目比較大的應用，很容易出現打包過程慢且node內存溢出的問題（這也是在解決electron打包過程中困擾我比較久的問題，最后想到了npm與cnpm的這點不同，解決了node打包內存溢出的問題，從打包一次一小時優化到打包一次一分鐘，極大的提高了效率）。

所以建議大家在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。

寫在最后

本次研究electron的目的是為electron自動更新做前期準備，下篇文章我將分享如何實現electron應用的版本更新。由于是初次接觸electron，如讀者在文中發現錯誤，請及時指正。
如有問題，歡迎私信、微信交流，WeChat：zeus9447
(*￣︶￣)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93613.html

相關文章

  • Electron 實戰桌面計算器應用

    摘要：在菜單中，我想點擊子菜單打開一個網站，那么就可以用到方法，則會在默認瀏覽器中打開打包應用其實將程序打包成桌面應用才是比較麻煩的事。 前言 Electron 是一個搭建跨平臺桌面應用的框架，僅僅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一個原生應用。這對于想要涉及其他領域的開發者來說是一個非常大的福利。 項目介紹 倉庫地址：lin-xin/calculato...

    GeekQiaQia 評論0 收藏0

  • 使用 electron-vue 構建你的桌面應用

    摘要：翻譯一下它是一個運行時，可以像一樣這樣執行也是一個使用構建跨平臺原生桌面應用的框架。具有兩個進程，分別是主進程，以及渲染進程。 什么是 electron 官網里這么說：Electron提供了一個Nodejs的運行時，專注于構建桌面應用，同時使用web頁面來作為應用的GUI，你可以將其看作是一個由JavaScript控制的迷你版的Chromium瀏覽器。 翻譯一下：它是一個運行時，可以像...

    qieangel2013 評論0 收藏0

  • 利用 electron-builder 實現 electron app 的署名／打包／發布以及自動更

    摘要：筆者系貢獻者之一是什么官方解釋如下簡單來說，就是一個可以將打包成安裝器，以及可以為提供自動更新功能的全家桶。也是一個開源的也是利用了的來進行新版本的發布通知。而且因為是通過靜態文件服務器實現的，所以大大減少了計算消耗。 筆者系 electron-builder 貢獻者之一（#12） electron-builder 是什么 官方解釋如下： A complete solution to ...

    banana_pi 評論0 收藏0

  • electron+vue制作桌面應用--前言

    摘要：最近學習，發現一個腳手架，不僅集成好了等等，甚至打包工具打包命令都一并準備好了，實在是太方便了。于是產生了通過制作一個簡單的桌面應用，邊做邊學的想法。 最近學習vue，發現一個electron腳手架，不僅集成好了electron、vue、vue-state、vue-route、webpack等等，甚至打包工具打包命令都一并準備好了，實在是太方便了。于是產生了通過electron+vue...

    fxp 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<