使用 Browserify 和 Gulp 动态生成所需的模块答案

【问题标题】：Dynamically generating a required module with Browserify and Gulp使用 Browserify 和 Gulp 动态生成所需的模块
【发布时间】：2015-04-27 22:30:27
【问题描述】：

有没有办法调用 Browserify（通过 Gulp），以便在 require使用给定名称的模块时包含不同的文件？

简而言之，我想要的最终结果是我的 Browserify 入口点，main.js：

var myPlatformSpecificImplmentation = require('./platform');
// go to town

运行gulp js:platform-a 时使用./path/to/platform-a.js 的内容，运行gulp js:platform-b 时使用./path/to/platform-b.js 的内容。

如果我使用的是 RequireJS，这就像相应地修改 paths 选项一样简单：

paths: {
  platform: './path/to/platform-a'
}

如果我能通过 gulp 的内置流机制以某种方式动态生成这些模块，那就太好了。在这种情况下，我可以说，将一个文件通过管道传输到 gulp-template，然后再传输到 Browserify。

谢谢

【问题讨论】：

标签： javascript dynamic gulp require browserify

【解决方案1】：

一种解决方案是像这样使用我的pathmodify 插件：

gulpfile.js

var
  pathmod = require('pathmodify'),
  paths = {a: '/path/to/platform-a.js', b: '/path/to/platform-b.js'};

function platform (version) {
  return function () {
    return browserify('./main')
      .plugin(pathmod(), {mods: [
        pathmod.mod.id('app/platform', paths[version])
      ]})
      .bundle()
      .pipe(...);
  };
}

gulp.task('js:platform-a', platform('a'));
gulp.task('js:platform-b', platform('b'));

main.js

var myPlatformSpecificImplmentation = require('app/platform');

我已将您的 require() 字符串更改为 app/platform 来说明这一点，因为这允许最简单的 pathmodify 实现，而不会与其他文件中的其他 ./platform 相对路径发生冲突。但是这个可以用 pathmodify 实现而不会有冲突的风险（通过测试父模块 [main.js 在这种情况下] 路径名）。如果保留 ./platform 字符串对您很重要，我会说明这一点。

或者您可以使用转换。如果您不想自己动手，请查看benbria/browserify-transform-tools 中的makeRequireTransform()。

如果我能通过 gulp 的内置流机制以某种方式动态生成这些模块，那就太好了。在这种情况下，我可以说，将一个文件通过管道传输到 gulp-template 并传输到 Browserify。

这不是不可能的，但要做到这一点并不容易。要在不接触磁盘的情况下执行此操作，您需要执行一些操作，例如创建 /gulp.src() 乙烯基文件并通过任何 gulp 插件运行它，然后将其转换为流以提供给 browserify。

【讨论】：