使用 webpack 将 webextension manifest 与 typescript 捆绑在一起
using webpack to bundle webextension manifest with typescript
我正在用打字稿开发一个网络扩展。为了组织代码，我想将扩展程序与 webpack 捆绑在一起。
理想情况下，webpack 应该编译 typescript 并将生成的 javascript 连同 html、css、图像复制到 dist/ 目录。
我找到了一个 repository，它正是我需要的。它以 manifest.json 作为入口点并创建一个 dist/ 目录。
但是模板没有使用打字稿。这是我的问题：在 manifest.json 中，我需要定义将要执行的 javascript 文件（内容、背景等）。但是这些脚本还不存在。它们由打字稿编译器生成。因此，如果我将 webpack 指向清单，它会抱怨找不到源。一个解决方法（我想避免）可能是设计一个两步工作流程：
- 使用 typescript 编译器将我的源代码编译为 javascript。
- 使用 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 等。它只是将打字稿编译为 dist/.
请注意：
这不是对原始问题的回答，我不会将其标记为已接受。
我找到了适合我的设置。但这是两步法：先编译打字稿，然后 运行 webpack.
修复：
在尝试了各种构建设置之后，我认为正确的解决方案毕竟可能是两步构建过程：
- 使用打字稿编译为javascript
- 使用 webpack 将生成的 javascript 打包成一个 webextension
如果 typescript 编译器配置不正确，您将不会在编辑器中看到错误消息。为了获得正确的自动完成和错误消息，您基本上需要一个 tsconfig.json。所以无论如何都需要设置第一步
然后，由于您已经配置了 typescript，您不妨将生成的 javascript 打包。这里的重要技巧是重新使用由打字稿编译器生成的现有源映射。 ()
我已经分叉存储库并将其重新配置为使用 typescript + webpack。
这包括摆脱 babel polyfill：https://github.com/lhk/webextensions-webpack-boilerplate
您使用的样板文件有点老套，需要太多代码，这违背了“使用 manifest.json”作为入口点的目的。我有3个选择。
使用包裹
Parcel v1 和 v2 有很好的 WebExtensions 转换器，实际上可以自动解析真正的 manifest.json，这意味着您可以在其中指定 .ts 文件，它们将被自动转换。
使用 v1 需要零配置，只需使用 parcel build manifest.json；使用 v2，您只需要一个 1 行 JSON 配置文件。
在 webpack 中使用正确的清单解析器
我实际上并不建议使用此选项，但至少 webextension-manifest-loader 会自动获取清单中指定的任何文件 + 它让您可以按浏览器构建。
不要使用 manifest.json 作为入口点
虽然自动化程度较低，但您可以像往常一样使用 webpack 捆绑 JS 和 CSS 文件，并将最后的 manifest.json 留在 dist 文件夹中。这避免了必须维护一个 house-of-cards webpack 配置，这比它实际帮助的要多。
我正在用打字稿开发一个网络扩展。为了组织代码，我想将扩展程序与 webpack 捆绑在一起。
理想情况下，webpack 应该编译 typescript 并将生成的 javascript 连同 html、css、图像复制到 dist/ 目录。
我找到了一个 repository，它正是我需要的。它以 manifest.json 作为入口点并创建一个 dist/ 目录。
但是模板没有使用打字稿。这是我的问题：在 manifest.json 中，我需要定义将要执行的 javascript 文件（内容、背景等）。但是这些脚本还不存在。它们由打字稿编译器生成。因此，如果我将 webpack 指向清单，它会抱怨找不到源。一个解决方法（我想避免）可能是设计一个两步工作流程：
- 使用 typescript 编译器将我的源代码编译为 javascript。
- 使用 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 等。它只是将打字稿编译为 dist/.
请注意： 这不是对原始问题的回答，我不会将其标记为已接受。 我找到了适合我的设置。但这是两步法：先编译打字稿，然后 运行 webpack.
修复： 在尝试了各种构建设置之后，我认为正确的解决方案毕竟可能是两步构建过程：
- 使用打字稿编译为javascript
- 使用 webpack 将生成的 javascript 打包成一个 webextension
如果 typescript 编译器配置不正确，您将不会在编辑器中看到错误消息。为了获得正确的自动完成和错误消息，您基本上需要一个 tsconfig.json。所以无论如何都需要设置第一步
然后，由于您已经配置了 typescript，您不妨将生成的 javascript 打包。这里的重要技巧是重新使用由打字稿编译器生成的现有源映射。 (
我已经分叉存储库并将其重新配置为使用 typescript + webpack。 这包括摆脱 babel polyfill：https://github.com/lhk/webextensions-webpack-boilerplate
您使用的样板文件有点老套，需要太多代码，这违背了“使用 manifest.json”作为入口点的目的。我有3个选择。
使用包裹
Parcel v1 和 v2 有很好的 WebExtensions 转换器，实际上可以自动解析真正的 manifest.json，这意味着您可以在其中指定 .ts 文件，它们将被自动转换。
使用 v1 需要零配置，只需使用 parcel build manifest.json；使用 v2，您只需要一个 1 行 JSON 配置文件。
在 webpack 中使用正确的清单解析器
我实际上并不建议使用此选项，但至少 webextension-manifest-loader 会自动获取清单中指定的任何文件 + 它让您可以按浏览器构建。
不要使用 manifest.json 作为入口点
虽然自动化程度较低，但您可以像往常一样使用 webpack 捆绑 JS 和 CSS 文件，并将最后的 manifest.json 留在 dist 文件夹中。这避免了必须维护一个 house-of-cards webpack 配置，这比它实际帮助的要多。