# External scripts and dependencies

**URL:** https://discourse.roots.io/t/external-scripts-and-dependencies/22873
**Category:** sage
**Tags:** sage10
**Created:** 2022-04-11T18:59:24Z
**Posts:** 3

## Post 1 by @jeremylind — 2022-04-11T18:59:24Z

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?

---

## Post 2 by @alwaysblank — 2022-04-11T19:29:00Z

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](https://github.com/roots/acorn/blob/0b77bea0f145498be1c06985c062a6c22703cdbb/src/Roots/Acorn/Assets/Bundle.php) might reveal something, but nothing jumped out at me. @kellymears or @QWp6t might be able to fill in the gaps here.

---

## Post 3 by @jeremylind — 2022-04-12T21:05:05Z

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.