Browserify jquery插件位于与jquery不同的文件上

Question

我是browserify的新手，并且尝试使用两个文件设置一个简单的示例。 我已经使用npm安装了jquery：

npm install --save jquery

而且我还使用Bower安装了轮播插件：

bower install slick-carousel

我基本上有一个通用的app.js，在那里我有所有通用的js，例如bootstrap + jquery +我的全局逻辑...然后我有另一个特定于页面的文件（例如：homepage.js）

我需要在app.js上使用jquery，在另一个文件上使用jquery插件（“ slick carousel”）。

当我在同一个文件上需要滑动轮播时，一切正常，我可以调用类似$（“＃my-selector”）。slick（）的东西：

global.$ = global.jQuery = require("jquery");
require('slick-carousel');

但是当我将它们放在这样的不同文件中时：

app.js：

global.$ = global.jQuery = require("jquery");

homepage.js

require('slick-carousel');

...我收到一条错误消息，说未定义光滑。

我一直在尝试使用browserify-shim失败。 另外，我通过在插件代码上添加console.log（window。$ === $）进行了简单的测试，我发现当插件失败时，插件上使用的$对象与window。$不同，这可能是失败的原因，但我不知道如何解决。

任何帮助，将不胜感激。

Answer 1

尝试显式将slick导出为jQuery插件，如下所示：

"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "jquery": "$",
  "slick-carousel": {
    "depends": [
      "jquery: jQuery"
    ],
    "exports": "$.fn.slick"
  }
},