ArcGIS for JavaScript API 3.x自定义构建

1、环境安装

（1） Node.js（包含npm，node包管理器）
（2） git
（3） Java 7或更高版本 - Closure Compiler所需 （用于Dojo构建，英文为Dojo build）
环境安装参考React+Cordova+Android环境配置中的1、nvm-windows安装；5、Android需求环境

2、克隆jsapi-resources

cd /d D:\mapp
git clone https://github.com/Esri/jsapi-resources.git

3、安装bower

npm install -g bower

4、安装依赖的包

进入jsapi-resources\3.x\bower\dojo文件夹，执行安装依赖包，安装过程视网络情况需要一定的时间，下载文件失败请重试（可能需要科学上网）

cd /d D:\mapp\jsapi-resources\3.x\bower\dojo
npm install

执行成功后，会在dojo文件夹下多出node_modules文件夹，在dojo/src下多出dojo、dojox、esri等文件夹，如下图所示

dojo/node_modules文件夹

dojo/src文件夹

5、修改相应文件

（1）dojo/build.profile.js中的layers
layers的每一个属性表示一个独立的js文件，可将多个js文件合成一个文件输出，如下面的app/main会输出为app/main.js，该文件中包含app/main、dojox/gfx/path、dojox/gfx/svg等多个文件的代码。

  layers: {
    // This is the main loader module. It is a little special because it is treated like an AMD module even though
    // it is actually just plain JavaScript. There is some extra magic in the build system specifically for this
    // module ID.
    "dojo/dojo": {
      // By default, the build system will try to include `dojo/main` in the built `dojo/dojo` layer, which adds
      // a bunch of stuff we do not want or need. We want the initial script load to be as small and quick to
      // load as possible, so we configure it as a custom, bootable base.
      boot: true,
      customBase: true
    },
    'app/main': {
      include: [
        "app/main",
        "dojox/gfx/path",
        "dojox/gfx/svg",
        "dojox/gfx/filters",
        "dojox/gfx/svgext",
        "dojox/gfx/shape",
        "esri/dijit/Attribution"
      ],
      includeLocales: ["zh-cn"]
    },
    "esri/layers/VectorTileLayerImpl": {
      include: [
        "esri/layers/VectorTileLayerImpl"
      ],
      includeLocales: ["zh-cn"]
    },
    "esri/layers/support/webglDeps": {
      include: [
        "esri/layers/support/webglDeps"
      ],
      includeLocales: ["zh-cn"]
    }
  },

（2）dojo/src/built.html

（3）dojo/src/app/main.js

define(["esri/map"], function (Map) {
    var map = new Map("map", {
        basemap: "topo",
        center: [-122.45, 37.75],
        zoom: 13
    });
});

6、构建

在jsapi-resources\3.x\bower\dojo文件夹下执行构建

npm run build

注意：构建完的文件在dojo/dist下，包含完整的包。如果需要手动挑选出需要加载的资源文件比较困难，可通过发布网站并利用工具下载来达到挑选的目的。

构建结果

7、将文件夹发布为虚拟目录并进行访问

将D:\mapp\jsapi-resources\3.x\bower文件夹发布为虚拟目录
访问http://localhost/bower/dojo/dist/index.html

访问地图

8、下载页面资源文件

（1）打开Chrome网上应用店https://chrome.google.com/webstore/category/extensions，需要科学上网；
（2）查找Full download JS/CSS/HTML，点击添加至Chrome；
（3）按F12打开开发者工具，找到FullDownload，点击Record进行录制，按F5刷新页面，按DownloadAll下载资源。

使用Full download JS/CSS/HTML进行下载

参考资料

1、Using Bower for Custom Builds of the ArcGIS API for JavaScript
https://developers.arcgis.com/javascript/3/jshelp/inside_bower_custom_builds.html
2、Bower Sample application
https://github.com/Esri/jsapi-resources/tree/master/3.x/bower/dojo

转载请注明：作者gisxiaowei，首发 jianshu.com