Question

我正在使用Gulp和Browserify将我的Javascript打包成两个独立的捆绑包：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

好像你想出了如何要求凉亭文件。希望您最初只需要捆绑一次，而不是每次构建。通过脚本标记包含库不是一个坏主意。我使用的另一种技术是使用scriptjs（polyfill也可以工作），异步加载我需要的任何供应商库，但确保在脚本加载后包含任何/所有需求。例如，您的index.js可能类似于：

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


});

它非常适合加载cdn文件或能够延迟加载某些库，这些库不是每个用户都必须在核心应用程序中使用，或者是在客户端路由后加载库。

如何使用Gulp使用Bower组件中的Browserify创建单独的供应商捆绑包

2 个答案: