How Does Sage 9 Enqueue jQuery?

bigskillet · January 4, 2018, 3:56pm

I’m trying to wrap my head around how Sage 9 enqueues jQuery… I read in a previous thread that Sage “tricks” WP into thinking that jQuery is enqueued?

I see the enqueue script in setup.php and the import'jquery' in the main.js file, but jQuery is also listed as a dependency in package.json. How does the import work, and where does it import from? How does the WP version get enqueued, or does it? Does Sage enqueue both the Wordpress jQuery and compile the node version into main.js, loading it twice?

How is everything tied together exactly, and how does that change if Soil is enabled?

Thanks!

ben · January 4, 2018, 5:15pm

That was in the old Roots theme

Sage does nothing special with jQuery, it simply lists it as a dependency for the main.js file that’s enqueued

The Sage main.js file is not built with jQuery included, you can see how by digging into the build config

Soil just loads jQuery from the jQuery CDN with a local fallback

bigskillet · January 4, 2018, 6:03pm

The import in main.js automatically enqueues jQuery? If so, I’m not seeing how.

The jQuery dependency listed in package.json is never used?

Sorry, I’m super noob at this and not understanding…

ben · January 4, 2018, 7:12pm

No, the enqueue for main.js has jQuery as a dependency. This is normal for WordPress development. Look up how wp_enqueue_script works.

github.com

roots/sage/blob/8691074b29c4c09dae40f0f0c33dc2b51d9292e2/app/setup.php#L15


use Roots\Sage\Container;
use Roots\Sage\Assets\JsonManifest;
use Roots\Sage\Template\Blade;
use Roots\Sage\Template\BladeProvider;


/**
* Theme assets
*/
add_action('wp_enqueue_scripts', function () {
   wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
   wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
}, 100);


/**
* Theme setup
*/
add_action('after_setup_theme', function () {
   /**
    * Enable features from Soil when plugin is activated
    * @link https://roots.io/plugins/soil/
    */

bigskillet · January 4, 2018, 7:31pm

Right, I see how main.js is using ['jQuery'] as a dependency, but I’m still not understanding where and/or how jQuery is getting enqueued.

alwaysblank · January 4, 2018, 7:46pm

WordPress Core registers jQuery as an available library, so when you define it as a dependency it’s automatically enqueued. See the official documentation.

bigskillet · January 4, 2018, 11:15pm

Thanks, alwaysblank! I didn’t realize that defining jQuery as a dependency on another script would automatically enqueue it. That makes sense!

Any comment on how the import'jquery' works in the main.js?

alwaysblank · January 4, 2018, 11:31pm

In Sage’s webpack configuration, jQuery is included under externals.

Per webpack’s documentation:

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer’s environment.

In other words, webpack is told to not bundle up jQuery, but import 'jquery' in main.js makes the jquery object/variable available to other things in main.js.

bigskillet · January 5, 2018, 3:24pm

If jQuery is being enqueued by WP, and is also not bundled, is the import even necessary? Does it ever get used? And if it does, does it import from node_modules?

ben · January 5, 2018, 3:35pm

Good questions, but what have you tried so far to try and find the answers? Have you looked at any sort of documentation? This isn’t specific to Sage, so there are resources out there to help you wrap your head around these things

bigskillet · January 5, 2018, 4:02pm

Touche! I have not looked at the webpack documentation yet, nor have I ever used webpack, but it’s next on the agenda to learn. Onward…

Thanks, benword, alwaysblank!