1

I'm using browserify in my WordPress theme. The problem I'm having is that I would like to include jQuery the "WordPress way" (i.e. wp_enqueue_script('jquery')) so that all WordPress plugins that rely on window.jQuery to be defined (and included in <head>) keep working.

I've managed to make browserify ignore jQuery requires simply by setting browserify(conf).ignore('jquery') in my Gulpfile.js but this results in scripts attempting to include jQuery the "browserify way" to fail.

How can I have a global jQuery object (included in its own <script> element in head) so that WP plugins work, and still have code that does var $ = require('jquery') work? Is it possible?

Update: I think I've gotten somewhat closer. I'm now including jQuery "normally" in <head>. I've set ignore('jquery') on my browserify call to avoid it ending up in my bundled file too AND I'm using browserify-shim (here's where I'm slightly lost) to (I think?) make it so that when you do require('jquery') it instead uses the global window.jQuery object?

This seems to work in my own code, if I do:

var foo = require('jquery');

console.dir(foo);

I do get a jQuery object, and yet my bundled file is only a few kb's indicating jQuery is not bundled in there. However, when I npm install jquery-cycle and require that from my script, I get a JS error from the jquery cycle code that $ is undefined. The strange part imo is that the cycle script does exactly what I did, that is var $ = require('jquery') but in there $ is not a jQuery object at all, instead just an empty object. Why is this?

Update 2: For some reason, if I change my require() of the cycle plugin to instead require the exact JS file it works. IE I've changed require('jquery-cycle') (which threw an error basically saying $ is undefined) to require('../node_modules/jquery-cycle/index.js').

I would of course very much prefer to keep requiring things the "normal" way. Any ideas why that refuses to work?

Update 3: After much digging I've finally found that one needs to set global: true to the transform() call in order for dependencies dependencies to also use the shimmed jQuery. I finally found this solution here: Shimming dependencies of dependencies with browserify-shim

Community
  • 1
  • 1
powerbuoy
  • 12,460
  • 7
  • 48
  • 78
  • Are you compling gulp on the same host with Wordpress? – Undefitied Mar 20 '16 at 00:41
  • I'm doing everything locally atm if that's what you mean? – powerbuoy Mar 20 '16 at 00:43
  • You may use even localy different host for running gulp to compile front-end files and http server for Wordpress. – Undefitied Mar 20 '16 at 00:52
  • If you do I think it would be difficult and senseless to connect them but if host is the same I maybe could suggest some options. Please tell how you run gulp and Wordpress – Undefitied Mar 20 '16 at 00:55
  • I'm not entirely sure what this has to do with my problem? – powerbuoy Mar 20 '16 at 00:58
  • 1
    There's a good post on this here: https://webdevstudios.com/2015/09/03/modernize-wordpress-javascript/ – Pete May 10 '17 at 20:33
  • 1
    @Pete thanks for that. I did manage to solve this though, just forgot to answer my own question. I essentially did exactly what he does in the article you linked to. – powerbuoy May 10 '17 at 21:56

1 Answers1

0

I do get a jQuery object, and yet my bundled file is only a few kb's indicating jQuery is not bundled in there. However, when I npm install jquery-cycle and require that from my script, I get a JS error from the jquery cycle code that $ is undefined. The strange part imo is that the cycle script does exactly what I did, that is var $ = require('jquery') but in there $ is not a jQuery object at all, instead just an empty object. Why is this?

If you have multiple jQuery on the page you have to add a global variable:

var $ = jQuery;
Undefitied
  • 747
  • 5
  • 14