node.js - 如何使用 Gulp 通过 Browerify 从 Bower 组件创建一个单独的供应商包

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

回答了我自己的问题:

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

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 )。