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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title></title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<link rel="stylesheet" href="esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="dojo/dojo.js"></script>
<script>require(["app/main"]);</script>
</head>
<body class="claro">
<div id="map"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</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
网友评论