引用webpack應用中的amd模塊（arcgis）

我正在構建一個webpack反應應用程序，我需要將arcgis maps合併到反應組件中。我知道如何將這項工作帶入我的項目。我已經試過的index.js創建arcgis目錄內置的JavaScript，並試圖引用：引用webpack應用中的amd模塊（arcgis）

import {Map} from 'arcgis/index'

這是行不通的。然後我試圖將css/js腳本標籤直接包含到我的index.html中，但是當我嘗試使用require時（如示例中那樣），webpack顯然找不到它們。有什麼方法可以告訴webpack在我的src文件中忽略require調用，以便它可以被瀏覽器處理？我試圖和失敗在做以下事情：

import React from 'react' 

export default class EsriMap extends React.Component { 
    componentDidMount() { 
     const _this = this 

     require(["esri/map", "dojo/domReady!"], function(Map) { 
      var map = new Map(_this.refs.map, { 
      center: [-118, 34.5], 
      zoom: 8, 
      basemap: "topo" 
      }); 
     }); 
    } 

    render() { 
     return (
      <div ref="map"></div> 
     ) 
    } 
}

來源

2016-04-28 David

webpack如何處理這種內在需求？也許嘗試dojo.require欺騙webpack忽略它？ –

你有什麼見解嗎？ –

-1

我想你可以嘗試使用bower版本的esrijsapi。 Doc link

來源

2016-05-06 12:30:46 mchepurnoy

您無法使用webpack直接從ArcGIS API的涼亭分佈中加載模塊。這[博客文章]（http://tomwayson.com/2016/11/27/using-the-arcgis-api-for-javascript-in-applications-built-with-webpack/）解釋了原因。 –

謝謝，湯姆。好帖子！我會在我的項目中嘗試您的解決方案。 – mchepurnoy

您可能想試試https://github.com/tomwayson/esri-webpack-babel。

這種方法很好，因爲它不會妨礙構建。您從CDN拉入ESRI Api，並告訴webpack它是外部的。

//Add this... 
externals: [ 
// Excludes any esri or dojo modules from the bundle. 
// These are included in the ArcGIS API for JavaScript, 
// and its Dojo loader will pull them from its own build output 
    function (context, request, callback) { 
    if (/^dojo/.test(request) || 
     /^dojox/.test(request) || 
     /^dijit/.test(request) || 
     /^esri/.test(request) 
    ) { 
     return callback(null, "amd " + request); 
    } 
    callback(); 
    } 
], 
//And this to you output config 
output: { 
    libraryTarget: "amd" 
},

當您的應用程序加載時，您將使用Dojo在腳本標記中引導您的webpack模塊。

<!-- 1. Configure and load ESRI libraries --> 
<script> 
    window.dojoConfig = { 
     async: true 
    }; 
</script> 
<script src="https://js.arcgis.com/4.1/"></script> 

<!-- Load webpack bundles--> 
<script> 
    require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { }); 
</script>

我已經與我正在使用的Angular 2應用程序一起工作。唯一的缺點是我還沒有得到使用Karma運行的單元測試。我現在只用了幾個小時。希望很快就能解決測試問題。

來源

2016-11-14 04:38:50 GetFuzzy

@只要您不需要延遲加載ArcGIS API（例如，僅在/map路由中），getfuzzy的答案就可以很好地工作。

對於您將要採取我描述的方法在this answer

這blog post解釋了爲什麼你需要使用這兩種方法之一，並解釋它們是如何工作的，以及每個優點/缺點。

來源

2016-12-06 04:48:26

引用webpack應用中的amd模塊（arcgis）

回答

相關問題