jquery - Browserify-shim 无法解决依赖关系

Question

我想将 bootstrap.js 和 jquery.js(均随 npm 安装)合并到vendors.js 文件中，但仍然可以通过调用 require('$') 来使用 jquery。所以我创建了 gulp 任务:

'use strict';

var gulp = require('gulp'), 
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');

gulp.task('bulld-frontend:vendors', function(done) {
 var build = browserify({
  entries: [
  'jquery',
  'bootstrap'
  ]
});

 build
 .transform(browserifyShim)
 .require('jquery')
 .bundle()
 .pipe(source('vendors.js'))
 .pipe(gulp.dest('build/public/js'))
 .pipe(plumber({
  errorHandler: helpers.logError
}));

 done();
});

然后将配置添加到package.json

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": "./gulp/utilities/shim-config.js",
}, 

最后在 gulp/utilities/shim-config.js

中配置我的垫片

'use strict';

module.exports = {
  'jquery'    :  '$',
  'bootstrap' :  { 'depends': { 'jquery': 'jQuery'} }
};

但是在运行任务后我收到文件，其中 bootstrap 优先于 jquery，因此它会抛出 未捕获错误:Bootstrap 的 JavaScript 需要 jQuery

我添加

"browserify": {
    "transform": [
        "browserify-shim"
    ]
}

到package.json，但没有帮助。在我看来， browserify 永远不会应用这种转换，因为如果我用 .transform(function() { throw new Error("OLOLO"); }) 替换 .transform(browserifyShim) 任务仍在工作。

Answer 1

我以错误的方式使用了 browserify 和 shim。

Fist，.transform(browserifyShim) 是不需要的，这是从代码调用转换的错误语法。

其次，转换工作正常，我所需要的只是创建 vendors.js 文件并使用 require('bootstrap') 在其中需要 Bootstrap 。然后指定vendors.js作为bulld-frontend:vendors任务的入口点:

var build = browserify({
  basedir: 'sources/client/js'
  entries: [
  './vendors.js'
  ]
});

并且它正在工作。