我想结合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' ] });
它正在发挥作用.