De wegen om een ArcGIS JS API-app te starten

ReneRubalcava

<\/HEAD>

<\/P>

<\/P>

Als je de ArcGIS API for JavaScript gebruikt om een middelgrote applicatie te bouwen, bouw je die waarschijnlijk uit verschillende modules. Als dat het geval is, gebruik je waarschijnlijk een standaard dojoConfig zoals beschreven in de online documentatie<\/A>. Wat je misschien niet weet, is dat de globale dojoConfig niet de enige manier is om het feest te starten<\/EM>.<\/P><\/P>

Er is niet één ware weg<\/H2>Hier is hoe je traditioneel je dojoConfig zou instellen om je app te starten.<\/P>Optie 1<\/H4>var dojoConfig = { \/\*stuff*\/ };
require(['dependency1', 'dependency2'], function(dep1, dep2) {
  \/\* geweldige webontwikkelingsdingen *\/
});<\/PRE><\/P>Je zou het ook aan de script-tag kunnen toevoegen.<\/P>Optie 2<\/H4><script src="\/* esrijs api url *\/" data-dojo-config="isDebug:true, packages=[\/* stuff *\]"><\/script><\/PRE><\/P>Maar ik vind dat dit niet echt werkt wanneer een grotere config nodig kan zijn.<\/P><\/P>Dit is een andere haalbare aanpak.<\/P>Optie 3<\/H4>require({
  packages: \/\* stuff *\/
});
require(['dependency1', 'dependency2'], function(dep1, dep2) {
\/\* geweldige webontwikkelingsdingen *\/
});<\/PRE><\/P>Maar er is nog een andere manier om je applicatie te configureren en te starten.<\/P>Optie 4<\/H4>require({
  packages: [{
     name: 'app', location: \/\*somewhere*\/
  }. {
    \/\* meer pakketten *\/
  }]
}, ['app']);
\/\/ app\/main.js in je app
require(['dependency1', 'dependency2'], function(dep1, dep2) {
\/\* geweldige webontwikkelingsdingen *\/
});<\/PRE><\/P>Zoals we zagen in deze post over Dojo-modules<\/A>, wanneer je om een heel pakket vraagt, zoals een map met Dojo, gaat het ervan uit dat er een main.js<\/SPAN>-bestand in de map voor dat pakket zit. Zo werkt dit.<\/P><\/P>

Enkele kanttekeningen<\/H2>Ik weet niet zeker of ik al geschreven heb over het gebruik van ES6 voor ArcGIS JS Dev, maar ik heb er wel een presentatie over gegeven op de meest recente Developer Summit. Je kunt de video hier bekijken<\/A>. Een van de kanttekeningen bij het gebruik van ES6 is dat transpilers, zoals Babel <\/A>import-statements zullen converteren naar define-statements, maar er is geen manier om een require-statement te krijgen. Dus het is nog steeds aan jou om ten minste één enkele require-entrypoint voor je applicatie te maken om te starten.<\/P>

<\/P>

Dus dit:<\/P>

import map from 'esri\/map';<\/PRE><\/P>Wordt dit:<\/P>define(['esri\/map'], function(Map) { \/\*stuff*\/' });<\/PRE><\/P>Oké. Het is niet precies zo, transpilers gebruiken bij het compileren naar AMD-modules de exports<\/SPAN> en modules<\/SPAN>-modules om wat dingen te doen die er vreemd uit kunnen zien in de gecompileerde code,<\/EM> maar het eindresultaat is in principe zoals hierboven weergegeven.<\/P><\/P>Om deze reden doe ik dit nu meestal.<\/P><script>dojoConfig = { \/\* config stuff *\/] };<script>
<script src=\"\\/\\/js.arcgis.com\\/3.13\\/\"><script>
<script>require(['app\\/main'], function(){});<script>
\\/\\/ app\\/main.js
define(['dependency1', 'dependency2'], function(dep1, dep2) {
 \/\* geweldige webontwikkelingsdingen *\/
});<\/PRE><\/P>Je kunt hiervan een voorbeeld zien in een 

testrepo <\/>A> waar ik TypeScript gebruikte.