wp_register_script multiple identifiers?

To have the JavaScript Libraries not to load since you already created a bundle of them, do the following:

Asumming the following, usual enqueue:

function the_js() {
    wp_enqueue_script('bundle_js', get_template_directory_uri() . '/js/bundle.js', array(), false, false);
}

add_action('wp_enqueue_scripts', 'the_js');

and lets say you have in your bundle the following libraries (listing the handles):

  1. jquery
  2. backbone
  3. colorpicker
  4. bootstrap_js

1,2,3 are already in core, 4 is a third party, you bundled all 4 because you dont want the 4 to be loaded as separate resources.

You have to deregister (if they are registered, core ones would be already) and register each one of them, each one of the libraries that are in your bundle:

function the_js() {
    wp_enqueue_script('bundle_js', get_template_directory_uri() . '/js/bundle.js', array(), false, false);

    //DEREGISTER the SCRIPTS THAT ARE IN YOUR BUNDLE
    wp_deregister_script('jquery'); //because its a Core-Registered Script
    wp_deregister_script('backbone'); //because its a Core-Registered Script
    wp_deregister_script('colorpicker'); //because its a Core-Registered Script

    //REGISTER THEM THIS TIME USING YOUR BUNDLE AS DEPENDENCY
    wp_register_script('jquery', FALSE, array('bundle_js'), '', FALSE);//THE KEY HERE IS THE SRC BEING FALSE
    wp_register_script('backbone', FALSE, array('bundle_js'), '', FALSE);
    wp_register_script('colorpicker', FALSE, array('bundle_js'), '', FALSE);

}

add_action('wp_enqueue_scripts', 'the_js');

the key here is to set the $src as FALSE so the registered script will be an alias, check this line in the core code:

// A single item may alias a set of items, by having dependencies, but no source.
if ( ! $obj->src ) {
   return true;
}

its what currently jquery does, when putting jquery as a dependency, it doesnt load jquery it loads jquery-core and jquery-migrate, this is the registered object for jquery:

object(_WP_Dependency)#329 (6) {
  ["handle"]=>
  string(6) "jquery"
  ["src"]=>
  bool(false)
  ["deps"]=>
  array(2) {
    [0]=>
    string(11) "jquery-core"
    [1]=>
    string(14) "jquery-migrate"
  }
  ["ver"]=>
  string(6) "1.12.4"
  ["args"]=>
  NULL
  ["extra"]=>
  array(0) {
  }
}

so, bundle_js its going to be loaded when a script has as dependency of any of the libraries (jquery, backbone, colorpicker) and it will be loaded 1 time, since the logic in WP_Dependencies checks if its already in the queue array.

If you want to check if a script is already registered use:

global $wp_scripts;
$wp_scripts->query('jquery'); //jquery as example handle

it will return a WP_dependency object if its registered, false if its not.

Some links for further understanding:
class.wp-dependencies.php
class.wp-scripts.php
functions.wp-scripts.php

Leave a Comment