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

Question

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

理想情况下，webpack 应该编译 typescript 并将生成的 javascript 以及 html、css、图像复制到 dist/ 目录。 我找到了一个repository，它可以满足我的需要。它以manifest.json 作为入口点并创建一个dist/ 目录。

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

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

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

• 入口点是清单
• HTML、CSS 和资产使用通常的加载器进行处理
• 对于 Javascript，配置查找 index.js 文件并使用 spawn-loader 处理它们
• 其他js文件用babel加载。

我不知道可以使用清单作为入口点。他们用extricate-loader 来做这件事。 docs 有一个很好的示例。

我创建了两种设置的混合。来自文档和存储库的示例。这是重现问题的代码： https://github.com/lhk/webextension_typescript_webpack/tree/complex

我还设置了一个最小的工作示例：https://github.com/lhk/webextension_typescript_webpack。但是这个工作示例没有复制任何 html、css 等。它只是将 typescript 编译为dist/。

Answer 1

您使用的样板文件有点笨拙，并且需要太多代码，以至于它违背了“使用 manifest.json”作为入口点的目的。我有 3 种选择。

使用包裹

Parcel v1 和 v2 具有良好的 WebExtensions 转换器，它们实际上会自动解析真实的 manifest.json，这意味着您可以在其中指定您的 .ts 文件，它们将被自动转译。

• Parcel v1 plugin
• Parcel v2 config（例如PR showing how to use it）

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

在 webpack 中使用适当的清单解析器

我实际上并不建议使用此选项，但至少 webextension-manifest-loader 会自动获取清单中指定的任何文件 + 它允许您针对每个浏览器进行构建。

不要使用 manifest.json 作为入口点

虽然自动化程度较低，但您可以像往常一样使用 webpack 打包 JS 和 CSS 文件，并将最终的 manifest.json 留在 dist 文件夹中。这避免了必须维护一个 house-of-cards webpack 配置，该配置比实际帮助更多。

Answer 2

请注意： 这不是对原始问题的回答，我不会将其标记为已接受。 我找到了适合我的设置。但它是两步法：先编译 typescript，然后运行 ​​webpack。

修复： 在尝试了各种构建设置后，我认为正确的解决方案可能是两步构建过程：

1. 使用 typescript 编译成 javascript
2. 使用 webpack 将生成的 javascript 捆绑到 web 扩展中

如果 typescript 编译器配置不正确，您将不会在编辑器中看到错误消息。为了获得正确的自动完成和错误消息，您基本上需要一个 tsconfig.json。所以无论如何都需要设置第一步。

那么，既然你已经配置了 typescript，那么你还不如直接打包生成的 javascript。这里的重要技巧是重用由 typescript 编译器生成的现有源映射。 (Webpack use existing source map from previous build step)

我已经分叉了存储库并将其重新配置为使用 typescript + webpack。 这包括摆脱 babel polyfill：https://github.com/lhk/webextensions-webpack-boilerplate