ArcGIS API for JavaScript 4.x 与 npm

In version 4.7, not only the rendering support of WebGL is added (the front-end rendering speed is accelerated, and the amount of rendering is also increased), the Promises syntax support in ES6 is enhanced, and npm management and webpack packaging are also supported, which is really good news.

"It means that JsAPI can be imported without going through the esri-loader package - ArcGIS geek said"

//Currently unfinished to be continued

1 Introduction

If you want to organize ArcGIS API for JavaScript projects locally, starting from 4.7, you can use npm, the hot front-end js package management tool, to manage APIs in the project.

In the past, Esri recommended bower, a package management tool. Now npm is recommended. Of course, bower can still be used, but npm is still recommended.

Beforehand, you may need to install:

• node.js
• git
• grunt
• java 7 or later

In fact, you just need to install node.js. The other three can be installed as needed.

2. How to install

one line of code

npm install arcgis-js-api --save
or
npm install arcgis-js-api
or
npm i arcgis-js-api

If the download is complete, a folder listing like this should appear inside the node_modules folder:

3. Configuration

The following is the relevant code to configure dojoConfig.

// create or use existing global dojoConfig
var dojoConfig = this.dojoConfig || {};

(function() {
  var config = dojoConfig;

  // set default properties
  if (!config.hasOwnProperty("async")) {
    config.async = true;
  }

  // add packages for libs that are not siblings to dojo
  (function() {
    var packages = config.packages || [];

    function addPkgIfNotPresent(newPackage) {
      for (var i = 0; i < packages.length; i++) {
        var pkg = packages[i];
        if (pkg.name === newPackage.name) {
          return;
        }
      }

      packages.push(newPackage);
    }
    addPkgIfNotPresent({
      name: "app",
      location: "./../../src/app"
    });
    addPkgIfNotPresent({
      name: "esri",
      location: "../arcgis-js-api"
    });
    addPkgIfNotPresent({
      name: "@dojo",
      location: "../@dojo"
    });
    addPkgIfNotPresent({
      name: "cldrjs",
      location: "../cldrjs",
      main: "dist/cldr"
    });
    addPkgIfNotPresent({
      name: "globalize",
      location: "../globalize",
      main: "dist/globalize"
    });
    addPkgIfNotPresent({
      name: "maquette",
      location: "../model" ,
      main: "dist/maquette.umd"
    });
    addPkgIfNotPresent({
      name: "maquette-css-transitions",
      location: "../mockup-css-transitions" ,
      main: "dist/maquette-css-transitions.umd"
    });
    addPkgIfNotPresent({
      name: "maquette-jsx",
      location: "../mockup-jsx" ,
      main: "dist/maquette-jsx.umd"
    });
    addPkgIfNotPresent({
      name: "tslib",
      location: "../tslib",
      main: "tslib"
    });

    config.packages = packages;
  })();

  // configure map.globalize
  var map = config.map || {};
  if (!map.globalize) {
    map.globalize = {
      "cldr": "cldrjs/dist/cldr",
      "cldr/event": "cldrjs/dist/cldr/event",
      "cldr/supplemental": "cldrjs/dist/cldr/supplemental",
      "cldr/unresolved": "cldrjs/dist/cldr/unresolved"
    };
    config.map = map;
  }
})();

Configure dojoConfig