CODEWITHSUNDEEP
javascriptecmascript-6dojoamd
Raziza O
Raziza O

Reputation: 1646

how to import dojo modules in es6

I'm developing a library that uses ArcGIS which based on dojo framework.

ArcGIS has main file that we include in the <script> Tag. And then we simple require their modules using require('esri/map'....

My es6 library has allot of modules and part of them need to use ArcGIS modules.

I'm using webpack and babel to bundle and transform the code. I'm not bundling ArcGIS in my library single file. I'm expecting my clients to include esri adding <script> and then include my bundle using <script>. There I've already met an obstacle - dojo multiple define... So I've made another js excluded from the bundle that loads my bundle file using dojo require that already exist (Cause arcgis is up already and loaded dojo).

Now, the second problem I don't manage to solve is to load other ArcGIS AMD modules..

I have my class MyMap.js 

export default MyMap {
   constructor() {
      // Adding here code to create ArcGIS Map
      // this.map = new esriMap....
   }
}

esriMap does not exist and must be loaded. In a simple application we would do this to make it happen

require([
  "esri/Map",
  "esri/views/MapView"
], function(Map, MapView) {

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [15, 65]
  });

});

but this does not work.

someone ?

Upvotes: 2

Views: 1847

Answers (1)

Raziza O
Raziza O

Reputation: 1646

for using dojo's require we need simply to write window.require and it will work.

without writing window. it is failing in the build process Can't resolve 'esri/Map'

For esri users who wants to use some nice loader - check out this one

code example:

export default class myMap {
     constructor(div) {
        window.require(['esri/Map', 'esri/views/MapView'], (esriMap, esriMapView) => {
            const map = new esriMap({
                basemap: "streets"
            });

            const view = new esriMapView({
                container: div,
                map: map,
                zoom: 4,
                center: [15, 65]
            });
        });
    }
}

Upvotes: 2

Related Questions