ArcGIS API for JavaScript與 npm

在4.7版本中，不僅增加了WebGL的渲染支持（渲染前端速度加快，渲染量也加大）、增強了ES6中的Promises語法支持，還支持了npm管理及webpack打包，實屬喜訊。

“意味着可以不經過esri-loader這個包來引入JsAPI了——ArcGIS極客說”

//當前未完待續

1. 前言

如果你想本地組織起ArcGIS API for JavaScript項目，那么從4.7開始，就可以用npm這個當下火熱的前端js包管理工具進行項目中的API管理了。

以前Esri是推薦用bower這個包管理工具的，現在推薦使用npm了，當然現在仍然能用bower，不過還是推薦用npm。

事先，你可能需要安裝：

• node.js
• git
• grunt
• java 7或更高版本

事實上，你只需要安裝node.js即可。其他三個可以根據需要安裝。

當然，仍然可以使用IIS或Tomcat本地部署的方式進行開發，看工程需要。

2. 如何安裝

一行代碼

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

如果下載完成，node_modules文件夾內應該會出現這樣的文件夾列表：

測試得出：最好結合VPN下載，npm牆比較高，下載較慢（本人實測大概510+s），而且下載的體積較大（130+MB），下下來的都是未經壓縮的源碼。

3. 配置

以下為配置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: "../maquette",
      main: "dist/maquette.umd"
    });
    addPkgIfNotPresent({
      name: "maquette-css-transitions",
      location: "../maquette-css-transitions",
      main: "dist/maquette-css-transitions.umd"
    });
    addPkgIfNotPresent({
      name: "maquette-jsx",
      location: "../maquette-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;
  }
})();