导入npm模块后访问window.np显示未定义，打印window却可见np属性

异常产生的核心原因 #

1. 异步加载时序问题
   页面中引入的脚本使用了type="module"类型，这类脚本的加载和执行默认是异步延迟的，不会阻塞页面后续同步代码的运行。实际的代码执行顺序和直觉上的顺序完全不同：
   • 浏览器先执行第二段普通同步脚本的逻辑：依次运行console.log(window)、console.log(window.np)
   • 等模块脚本完成下载、解析、执行流程后，才会运行模块内部把资源挂载到window.np的逻辑
     这就导致在同步代码执行的时刻，模块还没来得及给window挂上np属性，此时访问拿到的自然是undefined。
2. 控制台的感知偏差
   浏览器控制台打印复杂对象（比如window）时，展示的是对象的实时引用状态，不是打印瞬间的静态快照。也就是说，执行console.log(window的当下，np属性还没被挂载，但控制台会等到模块加载完成、window对象新增np属性后，才把完整的属性列表渲染出来，造成“打印瞬间window就已经存在np属性”的错觉。

快速验证方式 #

• 给访问代码加固定延迟，等待模块加载完成后再读取值：

<script>
  setTimeout(() => {
    console.log(window.np) // 模块加载完成后，np已完成挂载，可正常访问
  }, 1000)
</script>

• 打印即时的静态值，规避对象引用的渲染偏差：

console.log(JSON.stringify(window))
// 该方法输出的是执行代码那一刻window的真实属性，不会被后续的对象属性更新影响

可落地的适配方案 #

因为模块脚本的异步特性，不能在普通同步脚本的顶层直接访问全局挂载的np属性，推荐两种稳定的访问方式：

1. 监听模块脚本的加载完成事件，等脚本加载完毕后再访问挂载的属性：

<script type="module" id="np-entry" src="对应模块地址"></script>
<script>
  document.getElementById('np-entry').addEventListener('load', () => {
    console.log(window.np)
  })
</script>

2. 将访问np的代码也写在type="module"脚本块中，利用模块的执行顺序规则，保证模块挂载逻辑执行完成后，再运行后续的访问代码。

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