javascript - 使用 webpack 将 webextension manifest 与 typescript 捆绑在一起

Question

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

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

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

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

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

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

我不知道可以使用 list 作为入口点。他们使用 extricate-loader 来做到这一点。 docs有一个很好的 sample 。

我混合了这两种设置。来自文档和存储库的示例。这是重现问题的代码: 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 中使用适当的 list 解析器

我实际上并不建议这个选项，但至少 webextension-manifest-loader自动获取 list 中指定的任何文件+它让你有每个浏览器构建。

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

虽然自动化程度较低，但您可以一如既往地使用 webpack 来捆绑 JS 和 CSS 文件，并保留最后的 manifest.json。在 dist 文件夹中。这避免了必须维护一个纸牌屋 webpack 配置，这比它实际帮助的要多。