Browserify-shim不解析依赖项

Question

我想将bootstrap.js和jquery.js(都是用npm安装)组合到vendors.js文件中,但仍然可以通过调用来使用jquery require('$').所以我创建了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之前,所以它抛出 Uncaught Error: Bootstrap's JavaScript requires jQuery

我补充道

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

to package.json但它没有帮助.在我看来,这绝不browserify应用这种转变,因为如果我更换.transform(browserifyShim)与.transform(function() { throw new Error("OLOLO"); })任务仍然是工作.

Answer 1

我使用了browserify并以错误的方式填充了垫片.

.transform(browserifyShim)不需要Fist,这根本就是从代码调用转换的错误语法.

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

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

它正在发挥作用.