1. 程式人生 > >ArcGIS API for JavaScript 4.x 與 npm

ArcGIS API for JavaScript 4.x 與 npm

resolved 進行 ali IE fun IT rop async creat

在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即可。其他三個可以根據需要安裝。

2. 如何安裝

一行代碼

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

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

技術分享圖片

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; } })();
配置dojoConfig

ArcGIS API for JavaScript 4.x 與 npm