使用 webpack 将 webextension 清单与 typescript 捆绑在一起

Question

我正在用打字稿开发一个网络扩展。为了组织代码，我想将扩展与 webpack 捆绑在一起。

理想情况下，webpack 应该编译 typescript 并将生成的 javascript 与 html、css、图像一起复制到目录中dist/。我找到了一个可以满足我需要的存储库。它具有manifest.jsonas 入口点并创建一个dist/目录。

但该模板不使用打字稿。这是我的问题：在 中，manifest.json我需要定义将要执行的 javascript 文件（内容、背景等）。但这些脚本还不存在。它们是由打字稿编译器生成的。因此，如果我将 webpack 指向清单，它会抱怨找不到源。一种解决方法（我想避免）可能是设计一个两步工作流程：

1. 使用 typescript 编译器将我的源代码编译为 javascript。
2. 使用 webpack 将生成的代码捆绑到 dist/。

我想将其压缩为一个基于 webpack 的步骤，并尝试基于示例存储库来执行此操作。他们执行以下操作：

• 入口点是清单
• HTML、CSS 和资源使用常用的加载器进行处理
• 对于 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 等。它只是将 typescript 编译为dist/.

Answer 1

您使用的样板有点hacky并且需要太多代码，以至于它违背了“使用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 配置的麻烦，而不是实际的帮助。