Loading and playing with JavaScript in Drupal 8 9 10

some-file-name can be any name really, but should be the name of your theme or module.

Drupal will aggregate JS files by default, so to avoid that if necessary:

Library Options

You can optionally provide a version number per library, but Drupal doesn’t use it for anything:

You can also define dependencies per library, which are followed:

by default loads JS into the footer; to load to the header:

Attaching Libraries in a Theme

Reference them in your my-theme-name.info.yml file. They load globally as in on every page.

Here we’re loading our libraries this-lib-name and core/jquery (which is no longer loaded by default).

Attaching Libraries in Twig

You can attach a JS library from a twig template. It will only load if the template loads which means you can conditionally load it based on the naming structure of the Twig template file.

Attaching Libraries in your Module’s PHP

PHP allows you to control what libraries are loaded and when.

Of course you can load any number of libraries using this, and related, hooks.

Attaching Libraries in your Theme’s PHP

If not loading everywhere by using the .yml file.

See also related THEME_preprocess_HOOK()’s. Although some discourage using these hooks as they’re intended for preprocessing variables.

Conditional Libraries in PHP

To support Drupal caching, if you want to *conditionally* attach libraries, you need to provide cacheability metadata*.

*Metadata is comprised of a combination of up to 3 things: tags, contexts, and max-age. See the Cache API

Loading External JavaScript

External “libraries” still have to be defined inside Drupal libraries*.

Since Drupal will minify, if it already is, let know:

If attributes are needed in the resulting

JavaScript Settings

To add “computed” settings or configuration, first you have to define a dependency on core/drupalSettings.

Then access the some-prop setting in JS with:

Inline JavaScript

Almost always JavaScript should be included in a library.

But if you must, put the complete script tag in the html.html.twig file (yes, “html” is repeated twice.)

Dynamically Altering Libraries

Use this when you want to dynamically specify JS (or CSS) Libraries used across multiple requests.

hook_library_info_alter(&$libraries, $extension)

Allows modules and themes to change libraries' definitions.

An example of this is the Color module which uses this hook to replace CSS Libraries with the “colored” CSS libraries.

Dynamically Adding Libraries

Use it to programmatically add an entire library definition. And they are still cached.

Modules may implement hook_library_info_build() to add dynamic library definitions

Sneaky JavaScript

While you’re suppose to use libraries you could attach into HTML head and create a