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，以及包含所有必需的npm模块和自定义库的vendor.js。但问题是，当我尝试在浏览器上运行应用程序时，我得到多个'未捕获的ReferenceError：未定义jQuery'和'未捕获的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));
})

如何使用Browserify和Gulp捆绑Angularjs和jQuery npm模块以及自定义库？

0 个答案: