使用ES模块时控制台调用getActualGrid提示未定义的解决办法

你遇到的错误确实是ES模块的作用域特性导致的：ES模块运行在独立的模块作用域中，导出的函数、变量不会自动暴露到全局window对象，而浏览器控制台默认处于全局作用域，因此无法直接访问模块内导出的成员。

下面是几种可行的解决方式：

方式一：手动将调试成员挂载到全局对象 #

在你的模块文件（index.js）末尾添加代码，把需要调试的函数挂载到window上，这样控制台就能直接调用：

// 仅用于调试，正式环境可移除
window.getActualGrid = getActualGrid;
window.changeStatus = changeStatus;
window.generateGrid = generateGrid;

修改后的完整JS代码示例：

let rows = 9;
let columns = 9;
const width = 20;

export const generateGrid = () => {
  let grid = "<table cellpadding=0 cellspacing=0 class='grid__container'>";
  for (let y = 0; y < rows; y++) {
    grid += "<tr>";
    for (let x = 0; x < columns; x++) {
      grid += `<td id="cell-${x + "-" + y}">`;
      grid += "</td>";
    }
    grid += "</tr>";
  }
  grid += "</table>";
  let table = document.querySelector("#grid");
  table.innerHTML = grid;

  let gridContainer = document.querySelector(".grid__container");
  gridContainer.style.height = width * rows + "px";
  gridContainer.style.width = width * columns + "px";

  let cells = document.querySelectorAll("td");
  cells.forEach((cell) => {
    cell.addEventListener("mouseup", function (event) {
      let cell = event.target;
      changeStatus(cell);
    });
  });
};

export const changeStatus = (cell) => {
  if (cell.style.background != "gray") {
    cell.style.background = "gray";
  } else {
    cell.style.background = "";
  }
};

let actualGrid = [];
export const getActualGrid = () => {
  actualGrid = [];
  for (let y = 0; y < rows; y++) {
    actualGrid.push([]);
    for (let x = 0; x < columns; x++) {
      let cell = document.querySelector(`#cell-${x + "-" + y}`);
      actualGrid[y][x] = cell.style.background == "gray";
    }
  }
};

generateGrid();

// 调试用：挂载到全局
window.getActualGrid = getActualGrid;
window.changeStatus = changeStatus;
window.generateGrid = generateGrid;

方式二：在控制台动态导入模块 #

现代浏览器支持在控制台使用动态import语句加载模块，直接获取导出成员：

import { getActualGrid } from './src/js/index.js';
// 调用函数
getActualGrid();

注意：路径要和HTML中引入模块的路径保持一致，确保能正确加载模块文件。

补充说明 #

模块内部调用正常是因为模块内部通过export/import机制共享作用域，而控制台属于全局作用域，与模块作用域相互隔离，因此必须通过手动暴露或重新导入的方式访问模块内的导出成员。

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