当前位置 : 主页 > 网页制作 > JQuery >

jquery – Browserify-shim不解析依赖项

来源:互联网 收集:自由互联 发布时间:2021-06-15
我想结合bootstrap.js jquery.js(都是用npm安装)到vendors.js文件中,但仍然可以通过调用require(‘$’)来使用jquery. 所以我创建了gulp任务: 'use strict';var gulp = require('gulp'), helpers = require('./../utilit
我想结合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之前,所以它抛出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'
  ]
});

它正在发挥作用.

网友评论