我想结合bootstrap.js jquery.js(都是用npm安装)到vendors.js文件中,但仍然可以通过调用require(‘$’)来使用jquery. 所以我创建了gulp任务: 'use strict';var gulp = require('gulp'), helpers = require('./../utilit
所以我创建了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错误:Bootstrap的JavaScript需要jQuery
我补充道
"browserify": {
"transform": [
"browserify-shim"
]
}
to package.json但它没有帮助.在我看来,browserify永远不会应用这种转换,因为如果我用.transform(function(){throw new Error(“OLOLO”);}替换.transform(browserifyShim),那么任务仍然有效.
我使用了browserify并以错误的方式填充了垫片.不需要Fist,.transform(browserifyShim),这根本就是从代码调用转换的错误语法.
其次,转换工作正常,我所需要的只是创建vendors.js文件并需要带有require(‘bootstrap’)的bootstrap.然后将vendors.js指定为bulld-frontend:vendor任务的入口点:
var build = browserify({
basedir: 'sources/client/js'
entries: [
'./vendors.js'
]
});
它正在发挥作用.
