javascript - 如何导出浏览器化模块以供浏览器使用？

Question

我有几个 js 模块，我在 gulp 中与 browserify 捆绑在一起:

gulp.task('build:js', ['clean:js'], function () {
  browserify({
    debug: true,
    entries: paths.js.src
  })
    .transform('babelify', { presets: ['es2015'] })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest(paths.js.dist));
});

它输出一个bundle.js。但是，当像这样捆绑时，我不能在浏览器中需要单独的模块。我愿意这样做，因为我不想总是启动每个模块(有些模块是特定于页面的)。相反，我希望能够在 bundle 旁边的页面上使用 var someModule = require('some-module'); 。

现在我在文档中找不到任何与此相关的内容，因为它只记录了命令行选项(而不是 js api)。 This answer表明可以从 gulp 中获取和暴露一个模块，但这会暴露我的整个包，而不是它所组成的模块。

解决方案是将我的所有模块单独捆绑，排除依赖项(这样它们就不会在 bundle 之间重复)，然后将其连接起来。但这似乎并不是一个可行的解决方案，因为:

1. 这些模块可能无法解决依赖关系，因为所有内容都是单独捆绑的，因此必须在浏览器中解决依赖关系。我认为不理想并且容易破损。
2. 这是非常耗费人力的，因为我使用了很多模块，并且每个模块都必须在 gulp 中手动导出，依赖项在我的模板中排除和引用。 There are ways to automate it ，但这并不排除共享依赖项。

那么我该如何解决这个问题呢？我怎样才能在浏览器中要求我的 js 单独组成的包供客户端使用？

Answer 1

所以我最终做的是别的事情。我的要求有点违背 browserify 的工作方式，尽管这是可能的。也许最终当 HTTP2 导入和 js modules 时可以在所有主要浏览器中使用，这会更容易。

目前，我只有一个 global 包，用于在每个页面上运行的脚本，包括我的所有第三方库。然后对于每个页面，我都有一个单独的入口点及其所需的本地模块。这是迄今为止最易于维护的解决方案。