NW.js中跨模块无法正常访问主页面DOM的问题咨询

这个问题的核心原因是：NW.js在处理未打包的ES模块时，默认会把模块加载到Node.js上下文而非浏览器DOM上下文，这就导致模块里的document指向的是Node.js环境中的document对象（而非你页面的浏览器DOM），自然找不到页面元素。下面给你几个无需打包的解决方案：

方案1：将脚本标记为ES模块（推荐） #

直接修改你的index.html，给引入main.js的script标签加上type="module"属性，让浏览器按照ES模块规则加载所有依赖，确保所有代码都运行在DOM上下文：

<html> 
<head> 
<meta charset="utf-8" /> 
<title>test</title> 
</head> 
<body> 
<div id="container_model_view" class="brd"></div> 
<!-- 移除手动定义的exports，ES模块会自动处理模块导出逻辑 -->
<script type="module" src="./main.js"></script> 
</body> 
</html>

同时要确保你的TypeScript编译配置（tsconfig.json）输出ES模块格式：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "NodeNext",
    "outDir": "./"
  }
}

这样编译后的main.js和mod_test.js都会以ES模块形式运行，模块里的document就是页面的浏览器DOM对象，就能正常获取元素了。

方案2：显式从NW.js的浏览器上下文获取document #

如果不想用ES模块模式，你可以在模块里直接引用NW.js提供的浏览器window对象，从而拿到正确的document：
修改mod_test.ts：

// 直接通过globalThis获取NW.js的浏览器window（NW.js中浏览器上下文的window会挂载到globalThis）
export function getEl() { 
  return globalThis.window.document.getElementById("container_model_view"); 
}

这种方式不需要修改HTML，只要确保你的模块能访问到NW.js的全局window对象即可。

方案3：调整NW.js的上下文配置（不推荐生产环境） #

你也可以在package.json里配置NW.js的上下文模式，让所有脚本默认运行在DOM+Node混合上下文：

{
  "main": "index.html",
  "nodejs": {
    "contextIsolation": false
  },
  "chromium-args": "--disable-site-isolation-trials"
}

不过这种方式可能带来安全风险，仅适合快速测试场景。

为什么打包后能正常工作？ #

当你用Rollup或Webpack打包时，所有模块代码会被合并到同一个文件中，这个文件会作为普通脚本在浏览器DOM上下文运行，不存在跨上下文的问题，所以模块里的document能正常访问页面元素。

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