{"id":1045791,"date":"2020-11-03T09:02:28","date_gmt":"2020-11-03T17:02:28","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1045791"},"modified":"2020-12-17T14:07:31","modified_gmt":"2020-12-17T22:07:31","slug":"es-modules-are-coming-soon-in-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/es-modules-are-coming-soon-in-the-arcgis-api-for-javascript","title":{"rendered":"ArcGIS API for JavaScript – Working with frameworks and build tools just got easier"},"author":3801,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37101,738191],"tags":[96582,757301,757291,24921],"industry":[],"product":[36831],"class_list":["post-1045791","blog","type-blog","status-publish","format-standard","hentry","category-announcements","category-developers","tag-arcgis-api-for-javascript","tag-es-modules","tag-esm","tag-javascript","product-js-api-arcgis"],"acf":{"short_description":"The new ES modules will make it easier to integrate your ArcGIS API for JavaScript capabilities with 3rd party frameworks and module bundlers.","flexible_content":[{"acf_fc_layout":"content","content":"

Do you use the ArcGIS API for JavaScript with a 3rd<\/sup> party framework and\/or create local builds?<\/p>\n

The December release of the JavaScript API (version 4.18) will include an option for consuming the API as ES modules (Beta). This will make the process of integrating the JavaScript API with any framework and build tooling much easier.<\/p>\n

If you aren’t already familiar with ES modules, they are also known as ECMAScript Modules, or simply ESM. They are an official, standardized module system for working with modern JS that has been adopted by all the major browsers.<\/p>\n

How do I get started?<\/strong><\/p>\n

Install the new ES modules package (@arcgis\/core<\/a>) using NPM:<\/p>\n

npm install @arcgis\/core<\/code><\/p>\n

Then use import<\/code> statements to load individual modules into your application. Note, the ES modules package naming convention uses \/core<\/code> which is different from the \/esri<\/code> used by the AMD CDN<\/a> modules.<\/p>\n

\r\nimport<\/span> WebMap from<\/span> '@arcgis\/core\/WebMap'<\/span>;\r\nimport<\/span> MapView from<\/span> '@arcgis\/core\/views\/MapView'<\/span>;\r\n\r\nconst<\/span> webmap = new<\/span> WebMap({\r\n  portalItem: {\r\n    id: '05e015c5f0314db9a487a9b46cb37eca'<\/span>,\r\n  },\r\n});\r\n\r\nconst<\/span> view = new<\/span> MapView({\r\n  container,\r\n  map: webmap\r\n});<\/code><\/pre>\n
The second step is to copy the API’s assets; which includes styles, images, fonts, and localization files, from the @arcgis\/core\/assets<\/code> folder to your build folder. There are various ways to accomplish this depending on your build tooling, but a simple way is to configure an NPM script that runs during your build process. For example, you could npm install ncp<\/code> and configure a script in package.json<\/code> to copy the folder. Here’s a React example of this:<\/p>\n
\r\n{\r\n    \"script\"<\/span>: {\r\n        \"start\"<\/span>: \"npm run copy && react-scripts start\"<\/span>,\r\n        \"build\"<\/span>: \"npm run copy && react-scripts build\"<\/span>,\r\n        \"copy\"<\/span>: \"ncp .\/node_modules\/@arcgis\/core\/assets .\/public\/assets\"<\/span>\r\n    }\r\n}\r\n<\/code><\/pre>\n
\r\n \/\/ React - index.js<\/span>\r\n import <\/span>'@arcgis\/core\/assets\/esri\/themes\/dark\/main.css';<\/code><\/pre>\n
That’s all you have to do to bring the API into your application. Now you can run your build and the API’s ES modules will be bundled along with all your other imports.<\/p>\n
Should I migrate to the new modules?<\/strong><\/p>\n
If you are currently using the AMD CDN modules without a JS framework or creating local builds, then there’s no need to plan on migrating. You can continue using the AMD modules as you have been doing.<\/p>\n
If you are using a framework with esri-loader<\/code>, arcgis-webpack-plugin<\/code> or a custom build of the API , then consider migrating. The benefits of this approach includes:<\/p>\n
The final step is to set up the CSS. Choose a theme<\/a> and then configure your code to copy the theme files from @arcgis\/core\/assets\/esri\/themes\/<\/code> into your project. Here’s a React example:<\/p>\n