如何导出浏览器化的模块以供浏览器中使用？答案

【问题标题】：How do I export my browserified modules for requiring in the browser?如何导出浏览器化的模块以供浏览器中使用？
【发布时间】：2016-10-10 03:18:12
【问题描述】：

我有几个 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。但是，当像这样捆绑时，我不能 require 浏览器中的单个模块。我想这样做，因为我不想总是启动每个模块（有些是特定于页面的）。相反，我希望能够在捆绑包旁边的页面上使用var someModule = require('some-module');。

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

一种解决方案是分别捆绑我的所有模块，排除依赖项（这样它们就不会在捆绑包中重复），然后将它们连接起来。但这似乎并不是一个可行的解决方案，因为：

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

那么我该如何解决呢？我如何要求在浏览器中单独组合我的 js 的包以供客户端使用？

【问题讨论】：

您需要研究代码分块。不幸的是，这在 Webpack 中要容易得多。

标签： javascript browserify commonjs

【解决方案1】：

所以我最终做的是另一件事。我所问的有点违背了 browserify 的工作方式，即使它是可能的。也许最终当 HTTP2 导入和 js modules 可以在所有主要浏览器中使用时，这会更容易。

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

【讨论】：