引用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）

回答

相关问题