使用 webpack 將 webextension 清單與打字稿捆綁在一起

Question

我正在用打字稿開發一個網絡擴展。 為了組織代碼，我想將擴展與 webpack 捆綁在一起。

理想情況下，webpack 應該編譯 typescript 並將生成的 javascript 與 html、css、圖像一起復制到dist/目錄。 我找到了一個可以滿足我需要的存儲庫。 它有manifest.json作為入口點並創建一個dist/目錄。

但模板不使用打字稿。 這是我的問題：在manifest.json我需要定義將要執行的 javascript 文件（內容、背景等）。 但是這些腳本還不存在。 它們由打字稿編譯器生成。 因此，如果我將 webpack 指向清單，它會抱怨找不到來源。 一種解決方法（我想避免）可能是設計一個兩步工作流程：

1. 使用 typescript 編譯器將我的源代碼編譯為 javascript。
2. 使用 webpack 將生成的代碼打包到 dist/。

我想將其壓縮為一個基於 webpack 的步驟，並嘗試根據示例存儲庫執行此操作。 他們執行以下操作：

• 入口點是清單
• HTML、CSS 和 Assets 使用通常的加載器進行處理
• 對於 Javascript，配置查找 index.js 文件並使用 spawn-loader 處理它們
• 其他 Js 文件是用 babel 加載的。

我不知道可以使用清單作為入口點。 他們用extricate-loader做到這一點。 文檔有一個很好的示例。

我創建了兩種設置的混合。 來自文檔和存儲庫的示例。 這是重現問題的代碼： https : //github.com/lhk/webextension_typescript_webpack/tree/complex

我還設置了一個最小的工作示例： https : //github.com/lhk/webextension_typescript_webpack 。 但是這個工作示例不會復制任何 html、css 等。它只是將打字稿編譯為dist/ 。

Answer 1

您使用的樣板文件有點笨拙，需要大量代碼，因此違背了“使用 manifest.json”作為入口點的目的。 我有3個選擇。

使用包裹

Parcel v1 和 v2 有很好的 WebExtensions 轉換器，可以自動解析真正的manifest.json ，這意味着您可以在其中指定.ts文件，它們將被自動轉換。

• 包裹 v1 插件
• Parcel v2 配置（示例PR 顯示如何使用它）

使用 v1，您需要零配置，只需使用parcel build manifest.json ； 使用 v2，您只需要一個 1 行 JSON 配置文件。

在 webpack 中使用適當的清單解析器

我實際上並不建議使用此選項，但至少webextension-manifest-loader 會自動獲取清單中指定的任何文件 + 它允許您針對每個瀏覽器進行構建。

不要使用 manifest.json 作為入口點

雖然自動化程度較低，但您可以像往常一樣使用 webpack 捆綁 JS 和 CSS 文件，並將最終的manifest.json留在 dist 文件夾中。 這避免了必須維護紙牌屋 webpack 配置，這會造成比實際幫助更多的麻煩。

Answer 2

請注意：這不是原始問題的答案，我不會將此標記為已接受。 我找到了一個適合我的設置。 但它是兩步法：首先編譯打字稿，然后運行 ​​webpack。

修復：嘗試各種構建設置后，我認為正確的解決方案可能是兩步構建過程：

1. 使用 typescript 編譯成 javascript
2. 使用 webpack 將生成的 javascript 打包成 webextension

如果打字稿編譯器配置不正確，您將不會在編輯器中看到錯誤消息。 為了獲得正確的自動完成和錯誤消息，您基本上需要一個 tsconfig.json。 因此，無論如何都需要設置第一步。

那么，既然你已經配置了 typescript，你不妨把生成的 javascript 打包一下。 這里的重要技巧是重新使用由打字稿編譯器生成的現有源映射。 （ Webpack 使用先前構建步驟中的現有源映射）

我已經分叉了存儲庫並將其重新配置為使用 typescript + webpack。 這包括擺脫 babel polyfill： https : //github.com/lhk/webextensions-webpack-boilerplate