Quasar CLI 與 Webpack - @quasar/app-webpack
建置 SPA、行動應用程式、Electron 應用程式、BEX 或 SSR 之間的差異僅僅由 “quasar dev” 和 “quasar build” 命令中的 “mode” 參數決定。
新增 Quasar BEX 模式
為了建置 BEX，我們首先需要將 BEX 模式新增到我們的 Quasar 專案中
$ quasar mode add bexcontent_paste
如果您想直接開始開發，您可以跳過 “quasar mode” 命令並發出
$ quasar dev -m bexcontent_paste
如果缺少 src-bex 資料夾到您的專案中，這將自動新增 BEX 模式。
提示
src-bex 資料夾只是一個標準的瀏覽器擴充功能資料夾，因此您可以像使用任何其他瀏覽器擴充功能專案資料夾一樣自由地使用它。 請參考支援的瀏覽器擴充功能文件以了解更多資訊。
- Firefox 瀏覽器擴充功能文件
- Google Chrome 瀏覽器擴充功能文件
- 其他基於 Chromium 的瀏覽器 - 請參閱其特定文件。
了解 “src-bex” 的結構
新的資料夾具有以下結構
src-bex/
css/
# 在瀏覽器環境中使用的 CSS
content-css.css
# 透過 manifest.json 自動注入到使用網頁中的 CSS 檔案
icons/
# 您的應用程式在所有平台上的圖示
icon-16x16.png
# 16px x 16px 的圖示檔案
icon-48x48.png
# 48px x 48px 的圖示檔案
icon-128x128.png
# 128px x 128px 的圖示檔案
js/
# 在 BEX 環境中使用的 Javascript 檔案。
background.js
# 標準背景腳本 BEX 檔案 - 透過 manifest.json 自動注入
background-hooks.js
# 具有 BEX 通訊層掛鉤的背景腳本
content-hooks.js
# 具有 BEX 通訊層掛鉤的內容腳本
content-script.js
# 標準內容腳本 BEX 檔案 - 透過 manifest.json 自動注入
dom-hooks.js
# 注入到 DOM 中且具有 BEX 通訊層掛鉤的 JS 檔案
www/
# 編譯後的 BEX 原始碼 - 從 /src (Quasar 應用程式) 編譯而來
manifest.json
# 生產環境的主執行緒程式碼
下一節將更詳細地討論這些。