javascript - 在单个 JavaScript 代码库中使用 Browserify 实现多种风格/目标

Question

我正在开发多个浏览器扩展程序/附加组件，它们通常至少需要在 Chrome 和 Firefox 中运行(有时也在 Safari 中运行)。

最大的问题是保持 DRY，另一方面保持源代码清洁。从概念上讲，该项目通常包含以下部分:

• Chrome 的后台脚本
• Firefox 后台脚本
• 公共(public)后台代码
• Chrome 的内容脚本
• Firefox 的内容脚本
• 通用内容脚本代码
• 其他脚本(例如:选项页面)。

为了减少代码重复，我有一个用于浏览器和预处理的单一内容脚本它(删除其他浏览器特定的部分)在构建过程中。

不幸的是，这使得内容脚本变得又长又难看(而且难以检查)。

我想对我项目中的整个 JS 代码基本上使用 Browserify。仍然要这样做，我需要一个解决方案来处理这种流程:

浏览器特定入口脚本 -> 跨浏览器代码 -> 浏览器特定底层代码。

我会想象这种层次结构:

- Entry scripts
  - Browser A
  - Browser B 
  - ...
- Common code 
- Low-level code
  - Browser A
  - Browser B
  - ...

因此，例如，在构建过程中，我希望 Browserify 为浏览器 A 获取入口脚本，然后将其与通用代码和仅用于浏览器 A 的低级代码捆绑在一起。这是在公共(public)代码中没有这种切换的情况下完成的:

if(isBrowserA()) {
   var lowLevelModule = require("../lowLevel/browserA/module");
} else {
   var lowLevelModule = require("../lowLevel/browserB/module");
}

我希望使用 Browserify 的构建过程能为我做这些——根据目标替换低级代码的“根路径”。

用 package.json 解决它是行不通的，因为我需要灵活数量的目标(甚至可能更深的依赖树)。

Answer 1

尝试使用 factor-bundle或 partition-bundle浏览器插件。它们都有助于将代码拆分为不同的入口文件和一个公共(public)模块文件。 partition-bundle 还包括支持异步加载不同包的脚本。