Как связать модули Angularjs и jQuery npm и настраиваемые библиотеки с помощью Browserify и Gulp?

Question

Я работаю над одностраничным приложением, которое использует несколько внешних зависимостей. Приложение в основном построено на Angular 1. Я реализую некоторые критически важные для приложения части приложения, используя синтаксис React и ES6. Я переписал все файлы приложения, используя синтаксис модулей ES6, например:

myComponent.js

let Component = {
    bindings: {
        binding: '<'
    },
    controller: controller
};

// @ngInject
function controller() {
    var vm = this;
}

export default Component;

index.js

import angular from 'angular';

let module = angular.module('app', []);

import Component from './myComponent';
module.component('myComponent', Component);

export default module;

Тем не менее, все еще существует устаревший код, который зависит от Angular, jQuery и других библиотек. Чтобы связать код, я использую Gulp и Browserify с некоторыми преобразователями. Я также делю код на две группы: bundle.js и vendor.js. Первый предназначен для логики приложения, тогда как второй состоит из нескольких модулей npm плюс дюжина пользовательских библиотек, расположенных в каталоге libs. Некоторые из пользовательских библиотек требуют либо angular, либо jquery.

Я могу сгенерировать оба пакета: bundle.js, содержащий весь код приложения, и vendor.js, содержащий все необходимые модули npm и пользовательские библиотеки. Однако проблема заключается в том, что когда я пытаюсь запустить приложение в браузере, я получаю несколько "Uncaught ReferenceError: jQuery не определено" и "Uncaught ReferenceError: angular не определено", которые указывают на пользовательские библиотеки в vendor.js. Я предполагаю, что причина в том, что только модули npm подвергаются браузерной проверке и отбрасываются, а затем объединяются с пользовательскими библиотеками.

Мы приветствуем любые идеи о том, как правильно связать и уложить скрипты вендора.

Ниже приведены версии обоих пакетов package.json и Gulpfile.js.

package.json

"browserify": {
    "transform": [
      [
        "babelify"
      ],
      [
        "browserify-shim"
      ]
    ]
  },
  "browser": {
    "jQuery": "./node_modules/jquery/dist/jquery.js",
    "angular": "./node_modules/angular/angular.js"
  },
  "browserify-shim": {
    "jQuery": "global:jQuery",
    "angular": "global:angular"
  }

Gulpfile.js

'use strict';

var gulp = require('gulp');

var babelify = require('babelify'),
    browserify = require('browserify'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    source = require('vinyl-source-stream'),
    sourceMaps = require('gulp-sourcemaps'),
    watchify = require('watchify'),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    ngannotate = require('browserify-ngannotate'),
    stream = require('merge-stream');

var globalShim = require('browserify-global-shim').configure({
    'jQuery': 'jQuery',
    'angular': 'angular'
});

var config = {
    js: {
        src: './app/app.js',
        libs: './app/libs/**/*.js',
        outputDir: './dist/',
        mapDir: './',
        appOutputFile: 'bundle.js',
        vendorOutputFile: 'vendor.js'
    },
};

var vendors = ['react', 'angular', 'jquery'];

function appBundler(bundler) {
    bundler
        .bundle()
        .pipe(source(config.js.src))
        .pipe(buffer())
        .pipe(rename(config.js.appOutputFile))
        .pipe(sourceMaps.init({
            loadMaps: true
        }))
        .pipe(sourceMaps.write(config.js.mapDir))
        .pipe(gulp.dest(config.js.outputDir));
}

gulp.task('build:app', function() {
    var bundler = browserify({
            entries: config.js.src,
            debug: true
        })
        .external(vendors)
        .transform(babelify)
        .transform(globalShim)
        .transform('browserify-ngannotate')

    appBundler(bundler);
})

function vendorBundler(bundler) {
    return bundler
        .bundle()
        .pipe(source('vendor.js'));
}

var customLibsStream = gulp.src(config.js.libs);

gulp.task('build:vendor', function() {
    var bundler = browserify({
            debug: true
        })
        .require(vendors)
        .transform(globalShim);

    stream(vendorBundler(bundler), customLibsStream)
        .pipe(buffer())
        .pipe(concat('vendor.js'))
        .pipe(rename(config.js.vendorOutputFile))
        .pipe(sourceMaps.init({
            loadMaps: true
        }))
        .pipe(sourceMaps.write(config.js.mapDir))
        .pipe(gulp.dest(config.js.outputDir));
})