為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
懶加載 - 代碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
開放開發伺服器給公眾
Quasar CLI 搭配 Webpack - @quasar/app-webpack
設定 Electron

我們將使用 Quasar CLI 來開發和建置 Electron 應用程式。建置 SPA、PWA、行動應用程式或 Electron 應用程式之間的差異僅取決於 “quasar dev” 和 “quasar build” 命令中的 “mode” 參數。

但首先,讓我們學習如何設定 Electron 建置。

quasar.config 檔案

您可能會注意到 /quasar.config 檔案包含一個名為 electron 的屬性。

// should you wish to change default files
// (notice no extension, so it resolves to both .js and .ts)
sourceFiles: {
  electronMain: 'src-electron/electron-main',
  electronPreload: 'src-electron/electron-preload'
},

// electron configuration
electron: {
  // specify the debugging port to use for the Electron app when running in development mode
  inspectPort: 5858,

  bundler: 'packager', // or 'builder'

  // @electron/packager options
  // https://electron.github.io/packager/main/
  packager: {
    //...
  },

  // electron-builder options
  // https://www.electron.build/configuration/configuration
  builder: {
    //...
  },

  // Specify additional parameters when yarn/npm installing
  // the UnPackaged folder, right before bundling with either
  // electron packager or electron builder;
  // Example: [ 'install', '--production', '--ignore-optional', '--some-other-param' ]
  unPackagedInstallParams: [],

  // optional; add/remove/change properties
  // of production generated package.json
  extendPackageJson (pkg) {
    // directly change props of pkg;
    // no need to return anything
  },

  // optional; webpack config Object for
  // the Main Process ONLY (/src-electron/main-process/electron-main.js)
  extendWebpackMain (cfg) {
    // directly change props of cfg;
    // no need to return anything
  },

  // optional; EQUIVALENT to extendWebpackMain() but uses webpack-chain;
  // for the Main Process ONLY (/src-electron/main-process/electron-main.js)
  chainWebpackMain (chain) {
    // chain is a webpack-chain instance
    // of the Webpack configuration

    // example:
    // chain.plugin('eslint-webpack-plugin')
    //   .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  },

  // optional; webpack config Object for
  // the Preload Process ONLY (/src-electron/main-process/electron-preload.js)
  extendWebpackPreload (cfg) {
    // directly change props of cfg;
    // no need to return anything
  },

  // optional; EQUIVALENT to extendWebpackPreload() but uses webpack-chain;
  // for the Preload Process ONLY (/src-electron/main-process/electron-preload.js)
  chainWebpackPreload (chain) {
    // chain is a webpack-chain instance
    // of the Webpack configuration

    // example:
    // chain.plugin('eslint-webpack-plugin')
    //   .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  }
}

“packager” 屬性指的是 @electron/packager 選項。 `dir` 和 `out` 屬性會被 Quasar CLI 覆寫,以確保最佳結果。

“builder” 屬性指的是 electron-builder 選項

Packager 與 Builder

您必須選擇使用 packager 或 builder 其中之一。它們都是優秀的開源專案,但它們服務於略有不同的需求。使用 packager,您將能夠從一台機器為所有主要平台建置未簽名的專案(有一些限制)。雖然這很棒,但如果您只是想要快速且簡陋的東西,builder 具有更高的平台粒度和(以及一般的完善度)。從一台電腦交叉編譯您的二進制檔案在 builder 中並不是很有效(或者我們還沒有找到方法......)

依賴項最佳化

預設情況下,您根目錄 package.json 檔案中的所有 dependencies 都會被安裝並嵌入到生產環境可執行檔中。

這意味著它也將包含您僅限於 UI 的依賴項,這些依賴項已捆綁在 UI 檔案中(因此它會複製它們)。從我們的 CLI 角度來看,我們沒有任何通用方法可以判斷依賴項是否僅限於 UI,或者它是否被 main/preload 腳本使用,因此我們無法可靠地自動移除它們。

不過,您可以使用 quasar.conf > electron > extendPackageJson(pkg) 並覆寫或竄改您 package.json 檔案中的 dependencies 鍵來做到這一點。如果您只留下主要的和預載執行緒的依賴項,那麼這將會產生更小的生產可執行檔。