如何使用 browserify 和 gulp 设置对 jquery 的依赖关系

Question

所以我正在使用 gulp 和 browserify，我需要 jquery 和一个需要 jquery 作为依赖项的插件（owl-carousel）。

但是文件的顺序似乎有些混乱，因为在我使用的插件之后将查询编译到最终的 js 文件中，这会导致控制台错误：

Uncaught TypeError: Cannot read property 'fn' of undefined

如何告诉 browserify 存在依赖关系？为此我需要 browserify-shim 还是有其他方法？

我的包括：

var $             = require('jquery'),
    owlCarousel   = require('./vendor/owl.carousel/owl.carousel.js');

我现在也在使用 browserify-shim，但遇到了同样的错误。这是我的 package.js 中的内容：

  "browser": {
    "jquery": "./vendor/jquery/jquery.js",
    "owlcarousel": "onedirection/static/js/vendor/owl.carousel/owl.carousel.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "owlcarousel": {
      "exports": "owlcarousel",
      "depends": [
        "jquery:jQuery"
      ]
    }
  }

有人有什么想法吗？

Answer 1

在构建版本上全局使用 jquery( $ ) 有一个技巧：

global.$ = require('jquery');

并且在 package.json 中

"browserify-shim": {
    "jquery": {
      "exports": "$"
    }
  }