electron入坑指南

時間 2019-11-13

標籤 electron 指南简体版

原文原文鏈接

electron入坑指南

簡介

electron 實際集成chrome瀏覽器和node環境, 運行你寫的網頁html

app 基本目錄結構
- index.html 名稱能夠不是index, 這個文件與普通網頁的區別是它之中要引用<script 'renderer.js'> 相似這樣
- main.js 必須爲這個名稱, 用於建立窗口和主線程的操做, 能訪問node模塊
- renderer.js 渲染進程, 能訪問被打包的node模塊和瀏覽器

electron-vue

一開始什麼都不會, 因此用這個腳手架快速弄一個項目模板確定是最好的.
electron-vue模板項目弄好後, npm run dev 一切正常.
但當你興高采烈的編譯打包項目時, 就發現GG了. 因爲牆, 沒法下載...vue

隨後就發生了一連串問題, 如下是我對每一個問題找到的解決方案node

electron-builder 因爲網絡緣由沒法下載

Error: connect ETIMEDOUT 52.216.65.240:443linux

添加如下淘寶鏡像到環境變量webpack

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ios

下載二進制包到二進制包緩存目錄git

macOS ~/Library/Caches/electron-builder
linux ~/.cache/electron-builder
windows %LOCALAPPDATA%\electron-builder\cache

我電腦上二進制包緩存目錄有如下文件github

windows 下
- nsis
  - nsis-3.0.1.13 下載
- nsis-resources
  - nsis-resources-3.3.0 下載
- winCodeSign
  - winCodeSign-1.9.0 下載
linux 下
- appimage
  - appimage-9.0.3 下載
- fpm
  - fpm-1.9.2-2.3.1-linux-x86_64 下載

electron-vue 編譯後運行空白

可以編譯後不表明可以運行, 運行後發現一片空白, 經過暴力在renderer.js裏每一行輸出alert('xx')來判斷哪裏報錯,
發現運行 require('vue') 加載vue時報錯了, 但vue不是應該被webpack打包嗎web

因而在 webpack.renderer.config.js 配置裏找到了 externals 配置, 發現vue特殊被白名單除外了, 既然被打包了怎麼還找不到..vue-router

let whiteListedModules = ['vue', 'iview']
// externals 裏的都將不被webpack打包
externals: [
  ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
],

無論這個了, 我把全部 externals 配置都註釋掉, 都打包進來. 而後發現 HtmlWebpackPlugin 的 nodeModules 字段在運行時是 false

因而改爲

// 原來
nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
// 改爲, 一直提供node模塊的目錄
nodeModules: path.resolve(__dirname, '../node_modules')

這樣暴力以後, 報了另外一個錯誤, 說什麼依賴模塊 vue 未找到
後臺想了半天辦法, 仍是妥協了
設置環境變量 ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 忽略這個報錯
(後來發現正確配置時根本不會爆什麼錯或這警告的)
這樣打包出來能夠運行了. 雖然有一點大. 我也是後面才體會到爲何 electron-vue 要這麼配置

electron-builder 打包配置

我通過摸索, 發現雙 package.json 的形式有許多優點, 這是我如今採用的方式

開發根目錄的 package.json 打包配置片斷

"scripts": {
    // ... 省略一些
    "build:win": "electron-builder -- win",
    "build:deb": "electron-builder --linux deb",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "com.xueyou.testapp",
    // 這裏的產品名稱將影響打包出來安裝包的名稱
    "productName": "testapp",
    "copyright": "Copyright © 2017 ${author}",
    "directories": {
      // 定義輸出目錄
      "output": "release",
      // 定義app根目錄, 個人在 dist 目錄裏
      "app": "./dist"
    },
    // 將 globa 文件匹配到的文件打包, 這裏就是 將 app根目錄下的全部文件打包
    "files": [
      "./**/*"
    ],
    "win": {
      "target": "nsis",
      "icon": "dist/icons/icon.ico"
    },
    "linux": {
      "icon": "dist/icons",
      "category": "Utility"
    }
  },

app根目錄的 package.json 打包配置片斷,
注意下面的dependencies, 這很重要, 咱們想在renderer.js 渲染進程訪問node模塊, 就必須將node模塊打包,

如下的項目依賴就是你的應用能訪問的node外部模塊, 它會在 electron-builder install-app-deps 運行時, 在app根目錄建立node_modules依賴

webpack打包renderer.js時, 要 output 配置 libraryTarget: 'commonjs2', 讓輸出的模塊能訪問node

{
  // app 名稱, 注意不是安裝包的名稱
  "name": "checkout-counter",
  // app 版本
  "version": "1.0.1",
  // app 說明
  "description": "央聯收銀臺",
  "author": "XueYou <xueyoucd@gmail.com>",
  "license": "MIT",
  // 入口文件
  "main": "./main.js",
  // 項目依賴
  "dependencies": {
    "axios": "^0.17.1",
    "echarts": "^3.8.5",
    "querystring": "^0.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }
}