External scripts and dependencies

sage
1

Sage 10 is pushing me to better understand webpack and entry points. I have a component based script (initialize a Google Map) that relies on an external script (Google Maps, of course). If I were to use standard WordPress enqueue functions, I would:

  • add a separate entry point for my map script in bud.config.js:
    .entry({
      app: ['scripts/app.js', 'styles/app.scss'],
      map: ['scripts/map.js'],
    })
  • Use wp_register_script to register both the external script and my map script in setup.php, with the external script listed as a dependency of my map script:
    wp_register_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=APIKEY' , [], false, true );
    wp_register_script( 'my-map', 'PATHTOMYMAPBUNDLE' , [ 'google-maps' ], false, true );
  • Enqueue my scripts in the component:
wp_enqueue_script( 'google-maps' );
wp_enqueue_script( 'my-maps' );

Sage 9 had asset_path() to generate PATHTOMYMAPBUNDLE and relied on the WordPress enqueue functions. What is the right way to do this in Sage 10? Is there an equivalent to asset_path()? Should I be creating separate entry points for component-based scripts or loading them in my app entry point somehow?

2

If you’re using modern Sage 10 w/ Bud and Acorn, they can handle this for you. You would want to structure your entries a bit differently, though: Ideally you want to load on a single entry per page, since Bud & Acorn can resolve dependencies on their own and minimize what’s actually loaded. I’m guessing that app is scripts and styles used all across the site, but map is probably only used on (for the sake of argument) a single page. In that case, you might want to do something more like

.entry({
  app: ['scripts/app.js', 'styles/app.scss'],
  'map-page': ['scripts/app.js', 'styles/app.scss', 'map.js'],
})

// Somewhere early in your PHP
if ( is_map_page() ) {
  bundle('map-page')->enqueue();
} else {
  bundle('app')->enqueue();
}

What this doesn’t handle is the dependency you have on the google-maps library itself ( i.e. https://maps.googleapis.com/maps/api/js?key=APIKEY). Digging around in the Bundle source might reveal something, but nothing jumped out at me. @kellymears or @QWp6t might be able to fill in the gaps here.

3

Thanks! The external library dependency is quite important in this case. Loading a single entry per page makes sense too, though defining multiple entry points that bundle the same scripts would get a bit cumbersome if some of the scripts are component based rather than page based (What if I need a map component and a post filter component on the same page, and also want to use the post filter component on another page?)

For component based functionality, would it make more sense to conditionally load modules in a single script? If so, how is this best achieved in Sage and Bud? But, I don’t think that approach would deal with an external dependency, especially if the dependency is conditionally loaded itself.