reactjs - 在 webpack 应用程序中引用 amd 模块(arcgis)

Question

我正在使用 webpack 构建一个 React 应用程序，我需要合并 arcgis maps进入 react 组件。我知道如何将其带入我的项目中。我尝试使用内置 JavaScript 的 index.js 创建一个 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>
        )
    }
}

Answer 1

您可能想尝试这个 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 正确运行单元测试。我现在只花了几个小时。希望很快就能解决测试问题。