Browserify jquery plugin on a different file that jquery

Question

i'm new to browserify and i'm trying to setup a simple example using two files. I've installed jquery using npm:

npm install --save jquery

and also i've installed a carousel plugin using bower:

bower install slick-carousel

I basically have one general app.js where I have all general js like bootstrap + jquery + my global logic... Then I have another file specific to a page(eg.: homepage.js)

What I need is to have jquery on app.js and my jquery plugin("slick carousel") on a different file.

When I require slick-carousel on the same file everything works fine and i'm able to call something like $("#my-selector").slick():

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

But when I have them in different files like this:

app.js:

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

homepage.js

require('slick-carousel');

... I get an error saying that slick is not defined.

I've been trying to use browserify-shim with no success. Plus I made a simple test by adding a console.log(window.$ === $) on the plugin code and I discovered that when it fails the $ object used on the plugin is different from window.$ and that might be the reason why it's failing but I don't know how to fix it.

Any help would be appreciated.

Answer 1

Try explicitly exporting slick as a jQuery plugin like so:

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