如何使用 Gulp 通过来自 Bower 组件的 Browserify 创建一个单独的供应商包

Question

我正在使用 Gulp 和 Browserify 将我的 Javascript 打包成 2 个单独的包：application.js 和 vendor.js。

如果我的供应商库与Bower 一起安装，我如何捆绑vendor 包？

在我的 gulpfile 中，我使用了以下模块：

var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");

假设我只安装了 Phaser framework 和 bower（对于这个例子），我创建 application 包的 Gulp 任务如下所示：

gulp.task("scripts-app", function () {
  browserify("./app/javascripts/index.js")
    .external("phaser")
    .pipe(source("application.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

同时，vendor 任务如下所示：

gulp.task("scripts-vendor", function () {
  browserify()
    .transform(debowerify)
    .require("phaser")
    .pipe(source("vendor.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

当我运行这个 Gulp 任务时，我收到一条错误消息，指出 Error: Cannot find module 'phaser' from，然后是它搜索的所有目录（没有一个是 bower_components 目录）。

非常感谢有关如何成功打包这些内容的任何想法。谢谢！

Answer 1

回答了我自己的问题：

在 Gulp 任务中使用 require 时，您需要提供文件路径，而不仅仅是名称。

gulp.task("scripts-vendor", function () {
  browserify()
    .transform(debowerify)
    .require("./bower_components/phaser/phaser.js")
    .pipe(source("vendor.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

注意require("phaser") 变成了require("./bower_components/phaser/phaser.js")。

这样做是可行的，尽管构建捆绑包需要很长时间（大约 20 秒）。您最好通过<script> 标签直接将巨型库/框架加载到您的应用程序中，然后使用Browserify Shim。

这让你require()（在 NodeJS/Browserify 意义上）全局变量 (documentation)。

Answer 2

您似乎知道如何要求 bower 文件。希望您最初只需捆绑一次，而不是每次构建。通过脚本标签包含库并不是一个坏主意。我正在使用的另一种技术是使用scriptjs（polyfill 也可以），异步加载我需要的任何供应商库，但确保在脚本加载后包含任何/所有需求。例如，您的 index.js 可能是：

$script.('/assets/vendor', function() {
  var phaser = require('phaser');
  //rest of code


});

这对于加载 cdn 文件或能够延迟加载并非每个用户都必须在核心应用程序中使用的某些库或在客户端路由之后加载库的能力特别好。