OpenLayers问题：浏览器控制台打印ol_map显示undefined，代码内却正常

这问题我太懂了！咱们先拆解下原因：Webpack Encore默认会把你的JS代码打包成独立的模块作用域，模块内部定义的变量（比如你代码里的ol_map或者ol_Map）只会在模块内部生效，不会自动挂载到全局的window对象上。而浏览器控制台是在全局作用域下执行代码，所以自然找不到这个变量，返回undefined就不奇怪啦。

下面给你两个实用的解决方案：

方案1：手动挂载到全局（简单直接） #

在你的map.js里，当你创建完地图实例后，把它赋值给window的属性，直接把变量暴露到全局：

// 假设你是这样创建地图的
var ol_map = new Map({
  view: new View({ /* 视图配置 */ }),
  layers: [ /* 图层配置 */ ]
});

// 关键：把变量挂载到window上，让全局能访问到
window.ol_map = ol_map;

改完之后重新编译资源，再打开浏览器控制台输入console.log(ol_map)，就能正常拿到地图对象了。

方案2：用Webpack暴露插件（更规范的模块化方式） #

如果不想手动写window.xxx，可以用Webpack的expose-loader插件来自动暴露变量，步骤如下：

1. 先安装插件：

npm install expose-loader --save-dev
# 或者用yarn
yarn add expose-loader --dev

2. 在你的webpack.config.js里给Encore添加规则配置：

Encore
  // ... 你的其他Encore配置（比如entry、output这些）
  .addRule({
    test: require.resolve('./assets/js/map.js'), // 替换成你map.js的实际路径
    use: [{
      loader: 'expose-loader',
      options: {
        exposes: ['ol_map'], // 你要暴露到全局的变量名
      },
    }],
  })
;

3. 确保你的map.js里导出了这个变量（如果用的是ES模块语法）：

// map.js末尾导出变量
export const ol_map = new Map({ /* 你的地图配置 */ });

最后重启Encore的编译服务（npm run watch或yarn watch），配置就生效啦。

小提醒 #

不管用哪种方案，记得修改后重新编译资源，不然代码不会更新哦～

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