When I joined Esri, one of the first tasks I was given was to improve the integration of the ArcGIS API for JavaScript with Ember. This was a fun assignment that ended up becoming the ember-cli-amd project. Since then, we’ve worked on documentation and guides on integrating with other frameworks and build tools, including a webpack plugin. All the while, the team was working hard on migrating the source of the API to TypeScript. There are numerous benefits to a full TypeScript migration, but a key benefit to users is that the API can be deployed as ES Modules (ESM). This is available via @arcgis/core. How does this help users?
With the initial beta release of @arcgis/core, the only requirement was that you copy the static assets locally. These assets include workers, web assembly, styles, fonts, images, and language files. At 4.19, copying these assets is now optional. By default, the static assets will be loaded via the CDN. If you want to completely create an isolated local build, such as for a local network with no outside internet access, you still have the option to copy the static assets. This makes building the API more flexible by default. It also makes the builds even easier than before.
Let’s look at a couple of build tools. Take this basic code snippet for example. How could we use various build tools to build it?
import WebMap from "@arcgis/core/WebMap";
import MapView from "@arcgis/core/views/MapView";
const webMap = new WebMap({
portalItem: {
id: "56b5bd522c52409c90d902285732e9f1",
},
});
const view = new MapView({
container: "viewDiv",
map: webMap
});
Webpack
One of the most popular build tools is webpack. Previously, if you wanted to use the ArcGIS API for JavaScript with webpack, you were required to use our webpack-plugin. With the ESM build, it’s completely optional. You could use our webpack-plugin to help you copy over the assets if you want to use them locally, but even that’s not required.
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: ["./src/index.js"],
},
plugins: [new HtmlWebPackPlugin()]
};
There’s not much to this. You just import and use.
Rollup
Another popular build tool is rollup. It takes a little more work to set up, but once again, you don’t need to do anything special to get the API to work.
// rollup.config.js
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
export default {
input: "src/index.js",
output: { format: "es" },
plugins: [
resolve(),
commonjs(),
terser()
],
preserveEntrySignatures: false
};
Native ESM Build Tools
A couple of new build tools on the block are Snowpack and Vite. Both of these are very interesting as they handle native ESM, even in development mode. This means the incremental builds done during development are incredibly fast. These are probably my current favorite build tools to use today, so I highly recommend you try them out. This is what a Snowpack configuration looks like.
// snowpack.config.js
module.exports = {
plugins: [["@snowpack/plugin-webpack"]]
};
By default, Vite doesn’t even need a configuration. That’s insane.
Native ESM in the Browser
Another benefit of ESM is that it works natively in modern browsers via CDN. Before you get too excited and port all your web apps to work natively in the browser, please don’t. This is great for prototyping and working out some ideas, but it’s not optimized and you could possibly consume hundreds of JavaScript files. They’re small, but still, that’s a lot of network traffic. But still, great for testing some stuff.
import ArcGISMap from "https://js.arcgis.com/4.19/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/4.19/@arcgis/core/views/MapView.js";
const map = new ArcGISMap({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",
map,
zoom: 6,
center: [-118, 34]
});
The truth is there is very little, if any, special configuration you need to do to start building awesome mapping applications with the ArcGIS API for JavaScript. Gone are the days of special plugins, mapping packages, or any other special build steps. It just works.
Seriously, this is getting too easy. Maybe I should start working on Python or something.
You can find samples of using the ESM build with various build tools and frameworks on github.
Article Discussion: