Introduction
There are a couple of ways to use the ArcGIS API for JavaScript's AMD modules with local builds:
- Lazy load CDN modules using
esri-loader - Build modules locally with webpack using
arcgis-webpack-plugin
Note: While it is possible to use the AMD modules for local builds, we encourage you to use ES modules. They are easier to integrate and use with frameworks and build tools. The ES modules work natively in the browser, they are built to the latest ECMA standards and require minimal configuration.
Lazy load CDN modules
esri-loader is a tiny library that lazy loads modules from the CDN hosted build of the API. It works in applications that:
- are built with any loader/bundler, such as webpack, rollup.js, or Parcel
- use framework tools that discourage or prevent you from manually editing the webpack configuration, such as Angular 9+.
Installation
npm install esri-loader
Usage
Here are examples of how to use esri-loader with frameworks:
For more details on how to use the loadModules() method to lazy-load any version of the ArcGIS API for JavaScript in any framework see the esri-loader usage documentation.
Build locally with webpack
With the @arcgis/webpack-plugin you can build the API locally and use native import statements. It works with version 4.7.0 and greater. The plugin uses a lightweight AMD loader during the webpack build process to resolve module paths. The AMD loader is not used in the output application, it creates bundles with ArcGIS API for JavaScript.
Installation
npm install @arcgis/webpack-plugin
Usage
Here are examples that integrate the plugin with frameworks:
For more details on how to use and configure the plugin, visit the GitHub repository's README.