How to use Gulp to create a separate vendor package using Browserify from Bower components

Question

I use Gulp and Browserify to pack my Javascript in 2 separate packages: application.jsand vendor.js.

How do I bundle a package vendorif my vendor libraries are installed with Bower ?

In my gulpfile, I use the following modules:

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

Assuming I only have the Phaser framework installed with bower (for this example), my Gulp task to create the applicationpackage is as follows:

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

Meanwhile, the task is vendoras follows:

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) ().

Answer 2

, , bower. , , . script - . , , scriptjs ( polyfill), vender, , / script. , index.js :

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


});

cdn , , .