Script dependencies enqueuing in sage 10

sage
1

Hi,
I can’t find a way to specify script dependencies using the bud enqueuing method.

What I’d like to do, using bundle('app')->enqueue();, is something equivalent to :
wp_enqueue_script( 'handle', '/my/script.js', ['jquery', 'wp-i18n'], '1.0.0' );

Any ideas ?

3 Likes
2

Try using the enqueueJs or enqueueCss methods: acorn/Enqueuable.php at 62bcf0a64b3f3e0baa1e5dc016470824a967026a · roots/acorn · GitHub

1 Like
3

What would be the simplest way to add a dependency to app.js ? What I’d like to do is to load it after wp-l18n has loaded.
I assume I would have to remove bundle('app')->enqueue() and replace it with some enqueueJs and enqueueCss combination ?

4

Have you tried that? Did you run into a problem?

5

Any @wordpress dependencies referenced in project scripts:

  • are collected during compilation and flagged as dependencies of the entrypoint.
  • are replaced by references to window.wp variable.

You can see this for yourself by importing @wordpress/i18n in app.js. You do not need to install @wordpress/i18n – it’s replaced by the wp window variable reference before any javascript is run:

import "@wordpress/i18n";

/**
 * module
 */
const main = async () => null;

After running a build, check out ./public/entrypoints.json. You’ll see wp-18n in the dependencies array for the asset:

{
  "app": {
    "js": [
      "runtime.e377de.js",
      "app.df26aa.js"
    ],
    "css": [
      "app.521c12.css"
    ],
    "dependencies": [
      "wp-i18n"
    ]
  },
}

In the browser if you check out the sources tab of devtools you’ll see that i18n.min.js is loaded:

image

So, in short, you don’t need to do anything at all. It’s already done for you.

3 Likes
6

Thank you, this is what I was looking for !