1、下載下傳ArcGIS API 4.12
首先你要有一個ESRI的賬号，沒有的話注冊一個好了，然後到位址https://developers.arcgis.com/downloads/apis-and-sdks這裡選擇下載下傳的API，我們這裡選擇的是ArcGIS API for JavaScript 4.12。下載下傳完成後得到一個壓縮包，解壓後裡面包含了一個名為“arcgis_js_api”的檔案夾，這個就是主要的代碼。
2、部署環境IIS的準備
我的開發環境是Windows7，我自行下載下傳了IIS7.5并安裝，然後在控制台的“打開或關閉Windows功能”視窗裡，添加IIS服務。完成後就可以在計算機管理中看的安裝好的IIS。如下圖所示。
安裝完成後，要測試一下IIS是否正常。如下圖所示。打開IIS預設網頁。
當打開的網頁出現下面圖中所示的情況，即表示IIS安裝成功。
注意，這裡記得要添加一些MIME類型，因為ArcGIS API 4.12 for JS 用到了一些特殊的檔案，必須把這些類型讓IIS能夠解析。并且，這幾個MIMI類型最好直接添加到根節點上去，這樣後面你建的網站會自動繼承這些MIMI類型。
| 擴充名 | MIMI類型 |
| .svg | image/svg+xml |
| .woff | application/x-font-woff |
| .woff2 | application/x-font-woff |
| .wsv | application/octet-stream |
| .ttf | application/octet-stream |
| .wasm | application/wasm |
再注意，添加完MIMIE類型，還要添加HTTP響應标頭，這個是涉及到後面跨域通路的問題，強烈建議這裡在根節點的HTTP響應标頭裡面添加以下内容：
| HTTP響應标頭名稱 | 标頭值 |
| Access-Control-Allow-Credentials | true |
| Access-Control-Allow-Headers | origin,x-requested-with,content-type |
| Access-Control-Allow-Methods | POST,GET,OPTIONS |
| Access-Control-Allow-Origin | * |
到這裡，IIS這邊的任務就完成了。
3、ArcGIS API 4.12的安裝
把第一步總解壓後的“arcgis_js_api”這個檔案夾拷貝到“C:\inetpub\wwwroot”目錄下面（IIS的根目錄），記住是解壓檔案夾裡面的“arcgis_js_api”這個檔案夾，而不是解壓後的檔案夾。這個檔案夾的目錄結構如下：
第二步，修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12”這個目錄下的“init.js”這個檔案，把裡面的[HOSTNAME_AND_PATH_TO_JSAPI]，替換為你自己的IP或者用localhost也可以。如下圖：
同理，繼續修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12\dojo”這個目錄下的“dojo.js”這個檔案，把裡面的[HOSTNAME_AND_PATH_TO_JSAPI]，替換為你自己的IP或者用localhost也可以。如下圖：
再次注意：原“dojo.js”、“init.js”這兩個JS檔案裡的“baseUrl”用的是https方式的安全連結，ESRI官方文檔上也是建議你用這種連結方式，但是這個方式會帶來認證證書的問題，以及跨域通路的問題，雖然也是可以。我第一次部署就是用的這種連結方式，相對應，你在IIS上也必須部署為https這種方式的連接配接。成功之後，如果用chrome浏覽器，會在位址欄提示你證書問題，很煩，如果省事，就直接用http這種連結方式吧。
另外，有同學認為這種手動修改源檔案的方式太low太容易出錯了吧，有沒有一鍵快速替換的辦法？你别說，ESRI官網還真有，就是利用Visual Studio Code 和Node.js這兩個工具，可以實作快捷部署，我們下次專門講一下這個吧,，詳情請點選：基于ArcGIS API 4.12 for JS 的開發實踐（二）——Visual Studio Code和NodeJs實作快捷部署。
4、驗證及示範
ArcGIS API 4.12的安裝經過第三步，就基本上成功了，為了確定示範成功，我們最後驗證一下我們安裝是否成功，方法很簡單就是在位址欄輸入“http://localhost/arcgis_js_api/library/4.12/dojo/dojo.js”來看看浏覽器是不是能成功加載js。成功則如下圖所示。
最後用一個小程式來示範下效果，其實ESRI官方已經有這個例子了，我就直接抄過來了，首先建立一個HTML檔案，并拷入以下代碼：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.12/esri/css/main.css" target="_blank" rel="external nofollow" >
<script src="http://localhost/arcgis_js_api/library/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 11
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
注意，上圖中的兩個URL連結，就是要替換為你自己的連結，一個是css樣式，另外一個是dojo.js，這兒兩個都必須加載。不出什麼問題，在浏覽器中代碼将成功執行：
這裡加載的地圖是ESRI自帶的，後面我們将會講到怎麼加載自己或者百度、高德地圖。