search

thlorenz / browserify-shim

📩 Makes CommonJS incompatible files browserifyable.
MIT License
934 stars 87 forks source link

Doesn't work with jQuery plugins #226

Closed Dan503 closed 7 years ago

Dan503 commented 7 years ago

Or at least it doesn't seem to work with the typeahead jquery plugin.

I've created a repo for demonstrating the issue as simply as I can.

https://github.com/Dan503/browserify-shim-bug

I've put steps to replicate the bug in the readme but I'll post them here as well.

Steps to replicate the bug:

  1. fork/download https://github.com/Dan503/browserify-shim-bug
  2. run npm install
  3. run gulp --open

You will see a message that says "typeahead IS defined in jQuery.fn". It displays this message if jQuery.fn.typeahead returns a function in the src/_scripts/main.js file.

  1. Use ctrl+c to stop the command prompt task runner
  2. open the package.json file in the root folder
  3. change "//exports": "global:jQuery" to "exports": "global:jQuery" (equivalent of uncommenting it)
  4. run gulp --open again

You will see a message that says "typeahead is NOT defined in jQuery.fn". This of coarse is displayed when jQuery.fn.typeahead returns undefined from the main.js file.

bendrucker commented 7 years ago

browserify-shim isn't even going to run on your typeahead modules because it's in node_modules. Browserify won't touch modules there in order to avoid massive overhead.

Try using a global transform so it actually runs:

https://github.com/substack/node-browserify#btransformtr-opts

Dan503 commented 7 years ago

How would you do that on a jQuery plugin though?

jQuery plugins don't export a variable that can be added to the global transform list. They just alter whatever the global jQuery object is when called.

bendrucker commented 7 years ago

Has nothing to do with jQuery. Browserify isn't running the transform on the module's code.

Dan503 commented 7 years ago

So is the only way to have browserify read the code to take it out of the node_modules folder?

bendrucker commented 7 years ago

No, please give the link I posted above a read. You need to specifically tell browserify to run a transform on every module, including ones from npm. You do that via options or a different command line flag. Since this is not a bug or even a specific browserify-shim issue I'm going to go ahead and close this out.

Dan503 commented 7 years ago

I read through the link you sent but I still have no clue how I am supposed to use that information to load the jQuery plugin with browserify-shim enabled.

Can you please provide a code example showing what I need to do to my code in order to make it attach the jQuery plugin to the global jQuery object with browserify-shim enabled?