3

我很难将我的头包裹在 Browserify-shim 上以实现我想要的。该文档似乎很简单，但我一定遗漏了一些东西。

我试图能够使用 jquery var $ = require('jquery')（它本身可以正常工作），但也能够使用引用全局window.$或window.jQuery变量的随机插件。

例如，这是我尝试使用的插件： https ://github.com/jackmoore/zoom

它使用其他方法扩展$对象，并包装在 IIFE 中，注入 window.jQuery，如下所示：

(function($) {
// stuff
}(window.jQuery));

我正在使用 gulp 以简单的方式捆绑我的脚本，使用 npm browserify（而不是已弃用的 ( gulp-browserify) ：

gulp.task('scripts', function(){
  return browserify('src/scripts/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/scripts'));
});

package.json这是我文件的 browserify 部分：

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-zoom": {
      "depends": ["jquery:jQuery"]
    }
  }

我需要两个jquery和jquery-zoom一个 .js 文件：

var $ = require('jquery');
var zoom = require('jquery-zoom');

browserify shim 诊断工具的输出对我来说看起来很不错：

$ BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . -o dist/scripts/app.js

{ file: '/Users/clementoriol/web/browserify-test/src/scripts/app.js',
  info:
   { package_json: '/Users/clementoriol/web/browserify-test/package.json',
     packageDir: '/Users/clementoriol/web/browserify-test',
     shim: undefined,
     exposeGlobals: {},
     browser: undefined,
     'browserify-shim':
      { jquery: '$',
        'jquery-zoom': { depends: [ 'jquery:jQuery' ] } },
     dependencies:
      { jquery: '^2.1.4',
        'jquery-zoom': '^1.7.14' } },
  messages:
   [ 'Resolved "jquery" found in package.json to "/Users/clementoriol/web/browserify-test/jquery"',
     'Resolved "jquery-zoom" found in package.json to "/Users/clementoriol/web/browserify-test/jquery-zoom"',
     'Found depends "jquery" as an installed dependency of the package',
     { resolved:
        { '/Users/clementoriol/web/browserify-test/jquery': { exports: '$', depends: undefined },
          '/Users/clementoriol/web/browserify-test/jquery-zoom':
           { exports: null,
             depends: { jquery: 'jQuery' } } } } ] }

但是当我的脚本在浏览器中执行时，window.jQuery 仍然明显未定义。知道有什么问题吗？

我制作了一个快速、简单的存储库，重现了我的问题： https ://github.com/clementoriol/browserify-shim-test

谢谢 ！

4

0 回答 0