Browserify jquery 插件在与 jquery 不同的文件上答案

【问题标题】：Browserify jquery plugin on a different file that jqueryBrowserify jquery 插件在与 jquery 不同的文件上
【发布时间】：2016-05-03 11:33:50
【问题描述】：

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

npm install --save jquery

我还使用 bower 安装了一个轮播插件：

bower install slick-carousel

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

我需要将 jquery 放在 app.js 上，而我的 jquery 插件（“slick carousel”）放在另一个文件上。

当我在同一个文件上需要 slick-carousel 时，一切正常，我可以调用类似 $("#my-selector").slick():

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

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

app.js：

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

主页.js

require('slick-carousel');

...我收到一条错误消息，提示未定义 slick。

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery browserify browserify-shim

【解决方案1】：

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

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

【讨论】：