如何使用Gulp从wer组件中创建一个单独的Browserify供应商包

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");

假设我只安装了bower的Phaser框架(对于本例)，我创建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意义上)全局变量(文档)。

Answer 2

似乎你弄清楚了如何要求电源文件。希望您一开始只需要捆绑它一次，而不是每次构建都捆绑。通过脚本标记包括库并不是一个坏主意。我使用的另一种技术是使用scriptjs (polyfill也可以工作)，以异步加载我需要的任何供应商库，但请确保在脚本加载后包含任何/所有要求。例如，你的index.js可以是这样的:

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

});

对于加载cdn文件或延迟加载某些不一定被每个用户在核心应用中使用的库，或在客户端路由后加载库，这尤其好。