使用Webpack externals排除azure-maps-control时出现JS互操作错误

问题原因 #

当你在webpack.config.js中设置externals: 'azure-maps-control'时，Webpack默认会生成错误的变量引用代码const t=azure-maps-control——这不仅是语法错误（变量名不能包含空格），更关键的是：azure-maps-control在浏览器全局环境中暴露的变量是atlas，而非azure-maps-control。这导致t变量为undefined，后续调用t.Map时触发内部错误，最终让Blazor无法找到azMaps.core，抛出"Cannot use 'in' operator to search for 'core' in undefined"。

正确解决方案 #

修改Webpack的externals配置，明确指定azure-maps-control模块对应的全局变量是atlas，让Webpack生成正确的引用代码。

步骤1：更新webpack.config.js #

将externals改为对象形式，映射模块名到全局变量：

const path = require('path');

module.exports = {
    entry: "./dist/index.js",
    output: {
        path: `${__dirname}/wwwroot/dist`,
        filename: "bundle.js",
        library: 'azMaps'
    },
    externals: {
        'azure-maps-control': 'atlas'
    }
};

步骤2：确保宿主Blazor应用加载Azure Maps脚本 #

因为现在RCL不再打包azure-maps-control，需要在Blazor应用的index.html（WebAssembly）或_Host.cshtml（Server）中引入官方CDN脚本：

<!-- 在<head>或<body>末尾添加 -->
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- 若需要额外模块，比如服务模块，可一并引入 -->
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

步骤3：重新打包验证 #

执行Webpack打包后，bundle.js中会生成正确的变量引用：

const t=atlas;

此时Blazor通过await JS.InvokeVoidAsync("azMaps.core.addMap", mapId, MapAuthentication);调用时，就能正常访问Azure Maps的API了。

原理说明 #

Webpack的externals对象配置允许你指定：当代码中导入某个模块时，不将其打包，而是直接使用全局环境中的指定变量。这里'azure-maps-control': 'atlas'就是告诉Webpack：当代码import * as atlas from "azure-maps-control"时，直接使用全局的atlas变量，而不是打包模块本身。

内容的提问来源于stack exchange，提问作者Douglas Marquardt