我正在使用 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>
)
}
}
最佳答案
您可能想尝试这个 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 正确运行单元测试。我现在只花了几个小时。希望很快就能解决测试问题。
关于reactjs - 在 webpack 应用程序中引用 amd 模块(arcgis),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36919600/