esri-module-loader

a helper to load esri modules

Usage no npm install needed!

<script type="module">
  import esriModuleLoader from 'https://cdn.skypack.dev/esri-module-loader';
</script>

README

npm npm GitHub stars

esri-module-loader

This package is based on esri-loader.

install

npm i -S esri-module-loader
import { loadModules } from 'esri-module-loader'

module value

A module value can be:

  1. a full module value is an object like { name: 'Map', path: 'esri/map' }
  2. or it can be a path string like 'your/path/to/module', which will be converted into { name: 'module', path: 'your/path/to/module' }
  3. and it also can be a module name defined in shortcuts, like 'Map'

load single module

loadModules(moduleValue).then(Module => {})

load multiple modules

To load multiple modules, you need an array of module values, like:

const modules = [
  'esri/Color', // use last word as the module name
  'Map', // by defined shortcut name
  { name: 'Graphic', path: 'esri/graphic' } // or you can specify your module name
]

loadModules(modules).then(({ Graphic, Map, Color }) => {
  // loaded modules returned as an object mapping
  // use your loaded modules here
})

third party modules

needs extra dojo config:

loadModules(
  [{ name: 'MyModule', path: 'my/Module'}],
  { dojoConfig: { packages: [ name: 'my', location: '/path/to/my' ] } }
).then(({ MyModule }) => {})

shortcuts

You can add your own shortcuts:

import { loadModules, shortcuts } from 'esri-module-loader'

shortcuts.add('Map', 'esri/map')
shortcuts.add({ name: 'Map', path: 'esri/map' })
shortcuts.add([{ name: 'Map', path: 'esri/map' }, { name: 'Color', path: 'esri/Color' }])

loadModules(['Map', 'Color']).then(({ Map, Color}) => {
  // ...
})

Most of esri official modules have been already added into the shortcuts. You can check the module list

set default load options

import { loadModules, config } from 'esri-module-loader'

config({
  url: 'https://js.arcgis/com/4.8'
})

loadModules('Map').then(Map => {
  // this is esri/Map from 4.8 api
})

loadModules('Map', {
  url: url: 'https://js.arcgis/com/4.9' // this will override default loader options
}).then(Map => {
  // this is esri/Map from 4.9 api
})