Reactjs 在webpack应用程序中引用amd模块（arcgis）

我正在用webpack构建一个react应用程序，我需要将其合并到react组件中。我知道如何把这个带进我的项目。我已经尝试使用内置javascript的index.js创建一个

arcgis

目录，并尝试引用该目录：

import {Map} from 'arcgis/index'

那不行。然后，我尝试将css/js脚本标记直接包含到我的

index.html

中，但当我尝试

要求它们时，就像在示例中一样，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>
        )
    }
}

从“React”导入React
导出默认类EsriMap扩展React.Component{
componentDidMount（）{
常数this=this
要求（[“esri/map”、“dojo/domReady！”），函数（map）{
变量映射=新映射（_this.refs.map{
中间：[-11834.5]，
缩放：8，
底图：“地形”
});
});
}
render（）{
返回(
)
}
}
我想您可以尝试使用bower版本的esrijsapi
 您可能想试试这个

这种方法很好，因为它不会使构建陷入困境。您从CDN中引入ESRI Api，并告诉webpack它是一个外部Api

//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>


window.dojoConfig={
异步：true
};
要求（[“Angular/dist/polyfills.bundle.js”、“Angular/dist/vendor.bundle.js”、“Angular/dist/app.bundle.js”]，函数（polyfills，vendor，main）{}）；

我正在开发一个Angular 2应用程序。唯一的缺点是我还没有使用Karma正确运行单元测试。我只做了几个小时而已。。希望尽快找到测试问题的解决方案。
@getfuzzy的答案将很好地工作，只要您不需要延迟加载ArcGIS API（例如，仅在
/map
路线上）

为此，您需要采用我在中描述的方法

这解释了为什么您需要使用这两种方法中的一种，并解释了它们的工作原理以及每种方法的优缺点。
webpack如何处理这一内在需求？也许可以尝试dojo.require欺骗webpack忽略它？您有什么见解吗？您不能使用webpack直接从ArcGIS API的bower发行版加载模块。这就解释了原因。谢谢你，汤姆。棒极了！我会在我的项目中尝试你的解决方案。