我目前正在开始研究 NodeJS-Projekts，我的第一个项目应该是 Openlayers-Map 的简单包装类，它应该作为独立的工作。 我根据基本教程整理了我的配置，其中包含我能找到的任何内容，有望帮助解决问题。 但无论我做什么，我都无法让课程正常工作并出现错误：
Uncaught ReferenceError: OpenLayersMap is not defined以下是问题的极端简化：
请注意，index.js 稍后将包含更多导入。
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
library: { type: "umd" },
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
devServer: {
static: path.join(__dirname, "public"),
compress: true,
port: 9000,
open: true,
},
};
index.js
import OpenLayersMap from "./map";
export default OpenLayersMap;
地图.js
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default class OpenLayersMap {
constructor(elementId) {
this.map = new Map({
target: elementId,
layers: [
new TileLayer({source: new OSM()}),
],
view: new View({
center: [998616.32, 7084710.0],
zoom: 12,
}),
});
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers Map</title>
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="bundle.js"></script>
<script>
const map = new OpenLayersMap("map")
</script>
</body>
</html>
以下方法有效：
index.js
import OpenLayersMap from "./map";
document.addEventListener('DOMContentLoaded', () => {
const map = new OpenLayersMap('map');
});
或
import OpenLayersMap from './map';
window.createMap = (elementId) => {
new OpenLayersMap(elementId);
};
但是第一个不允许我自定义目标的 ID，第二个不允许我提供类的实例以供进一步使用，因此我无法使用这些。
在 HTML 文件中，确保在脚本加载后访问 OpenLayersMap 类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers Map</title>
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="bundle.js"></script>
<script>
// Ensure the code runs after the bundle is loaded
window.onload = function () {
const map = new OpenLayersMap("map");
console.log("Map instance created:", map);
}
</script>
</body>
</html>