cliwebpackarcgis API For JS的天坑之路（一）

写在前面的话（背景交代）

最近参加esri比赛，但是又想趁机接触前端最新的一些框架和技术，所以，毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了，所以，我也不知道会不会有天坑二的出现。
gituhb项目地址

新建vue-cli工程

如何用vue-cli + webpack构建一个工程，网上一大堆的代码，我就不赘述了。比如这个就是很好地入门文章，先要做的还是要把vue-cli和webpack的模块划分好，框架搭建好，然后才是我要说的，地图部分。

如何在vue-cli，webpack中使用arcgis API

参考文章（1），这个要翻个墙
，这个也要翻个墙
，主要参考esri官网，他告诉我是可以实现的，在无数次我都想要放弃了，但是想到官网都给了例子了，这么大的公司不能是逗我玩吧，还是坚持下来了。

以上东西全部安装好了以后，暂时我们要准备的东西就算准备好了。esri-loader是可以使用了。我们现在可以不用link,css文件，以及script，API文件了。 现在就是最大的坑了，如何使用，官网给的例子只是加载地图这一部分的方法，肯定是不完整的，esriLoader.dojoRequire就看着一句话，esriLoader当时我以为就是这样使用的，，但是esriLoader其实是一个类似于变量的我们自己的命名的对象，也就是我们把esri-loader导出为了esriLoader

所以，现在需要在我们使用的.vue文件中导出esriLoader对象import esriLoader from ‘esri-loader‘

然后现在就可以使用官网的例子加载地图了。

同样的，css也可以引入了

<style> @import url(‘https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css‘); @import url(‘https://js.arcgis.com/3.20/esri/css/esri.css‘); </style>

其实看起来是很简单，但是当时我陷入了无知的漩涡。然后后来我发现，虽然官网例子少，但是他是给了具体如何操作的。他写在esri-loader的readme里面

我把它贴出来

esri-loader

A tiny library to help load modules in non-Dojo applications.

Install npm install esri-loader Usage

The code below shows how you can load the ArcGIS API for JavaScript and then create a map. Where you place this code in your application will depend on what framework you are using. See below for .

Loading Styles

Before you can use the ArcGIS API in your app, you’ll need to load the styles, for example:

/* esri styles */ @import url(‘https://js.arcgis.com/3.20/esri/css/esri.css‘); Pre-loading the ArcGIS API for JavaScript

If you have good reason to believe that the user is going to transition to a map route, you may want to start pre-loading the ArcGIS API as soon as possible w/o blocking rendering, for example:

import * as esriLoader from ‘esri-loader‘; // preload the ArcGIS API esriLoader.bootstrap((err) => { if (err) { // handle any loading errors console.error(err); } else { // optionall execute any code once it‘s preloaded } }, { // use a specific version instead of latest 4.x url: ‘//js.arcgis.com/3.20/‘; }); Lazy Loading the ArcGIS API for JavaScript

Alternatively, if users may never end up visiting any map routes, you can lazy load the ArcGIS API for JavaScript the first time a user visits a route with a map, for example:

// import the esri-loader library import * as esriLoader from ‘esri-loader‘; // has the ArcGIS API been added to the page? if (!esriLoader.isLoaded()) { // no, lazy load it the ArcGIS API before using its classes esriLoader.bootstrap((err) => { if (err) { console.error(err); } else { // once it‘s loaded, create the map createMap(); } }, { // use a specific version instead of latest 4.x url: ‘https://js.arcgis.com/3.20/‘ }); } else { // ArcGIS API is already loaded, just create the map createMap(); } Loading Modules from the ArcGIS API for JavaScript