【发布时间】：2020-01-08 10:23:18
【问题描述】：
在quick start ArcGIS javascript api 指南中，它具有以下示例代码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 11
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
这对于简单的网页非常有用。但是，我使用的是 Blazor（服务器端），我想将（上面的）代码封装到 Blazor 组件中。所以我遇到了第一个绊脚石 - 我不允许在 Blazor 组件中添加 <script> 标记。那是因为可以随时动态创建控件。所以我想我应该用 Stimulus 来解决这个问题。
这是我的 Blazor 组件（到目前为止）。我有一个名为Map.razor的文件：
<div data-controller="map"></div>
@code {
protected override bool ShouldRender()
{
var allowRefresh = false;
return allowRefresh;
}
}
我添加了ShouldRender 方法，这样组件将只呈现一次（添加时）。这就是我想要在我的刺激控制器map-controller.js 中实现的目标：
import { Controller } from "stimulus";
import EsriMap from "esri/Map";
import MapView from "esri/views/MapView";
export default class extends Controller {
connect() {
var map = new EsriMap({
basemap: "topo-vector"
});
var view = new MapView({
container: this.element,
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
}
}
最初，我尝试添加 ArcGIS，以便使用 Webpack 构建它（这样上面的代码就可以工作）。但是，我遇到了 ArcGIS javascript api 和 tailwindcss 之间的兼容性问题。 ArcGIS 无法编译，因为调用 require('fs') 时出现问题。
我没有解决require('fs') 问题（这超出了我现有的经验），而是选择通过CDN 引入ArcGIS js。所以我尝试使用 Webpack 中的 external 配置功能设置 ArcGIS。这是我的webpack.js.config 文件：
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const bundleFileName = 'holly';
const dirName = 'Holly/wwwroot/dist';
module.exports = (env, argv) => {
return {
mode: argv.mode === "production" ? "production" : "development",
externals: {
'esrimap': 'esri/Map',
'mapview': 'esri/views/MapView'
},
entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
output: {
filename: bundleFileName + '.js',
path: path.resolve(__dirname, dirName),
libraryTarget: "umd"
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: bundleFileName + '.css'
})
]
};
};
这就是我在刺激控制器中所做的：
import { Controller } from "stimulus";
import EsriMap from "esrimap";
import MapView from "mapview";
export default class extends Controller {
connect() {
var map = new EsriMap({
basemap: "topo-vector"
});
var view = new MapView({
container: this.element,
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
}
}
但是，我在浏览器中看到以下异常：
TypeError: esrimap__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
at Controller.connect (map_controller.js:14)
at Context.connect (context.ts:35)
at Module.connectContextForScope (module.ts:40)
at eval (router.ts:109)
at Array.forEach (<anonymous>)
at Router.connectModule (router.ts:109)
at Router.loadDefinition (router.ts:60)
at eval (application.ts:51)
at Array.forEach (<anonymous>)
at Application.load (application.ts:51)
您可能已经猜到了，我的 javascript/webpack 知识已经达到极限。我确实对 ArcGIS javascript API 以及它是否支持 commonjs 做了一些研究。显然它使用了支持 AMD 的 Dojo。所以我尝试了以下配置：
externals: [{
'esrimap': {
commonjs: 'esri/Map',
commonjs2: 'esri/Map',
amd: 'esri/Map'
},
'mapview': {
commonjs: 'esri/views/MapView',
commonjs2: 'esri/views/MapView',
amd: 'esri/views/MapView'
}
}],
但我得到了同样的错误。我已经阅读了 webpack documentation - 我不清楚我应该如何配置它。我做错了什么？
【问题讨论】：
标签： webpack cdn blazor arcgis-js-api stimulusjs