ES6模块import语句执行机制疑问：导入前window挂载对象为何存在

核心原因是ES模块的import语句存在静态提升特性：

• 按照ECMAScript模块规范，所有import语句都会被JS引擎静态解析，提升到当前模块的最顶部优先执行，和代码中书写的先后顺序无关。
• 你引入的@scope/external-component包的内部代码，会在自身被加载执行时，将external_component_stuff对象挂载到window上。
• 你写的代码实际执行顺序和书写顺序不一致，真实运行顺序如下：
  1. 优先执行顶部导入@angular/core的逻辑
  2. 再执行import { ExternalComponent } from '@scope/external-component'的导入逻辑，此时window.external_component_stuff被创建赋值
  3. 最后才执行你写的console.log、debugger语句，因此打印结果不为undefined

如果要验证该结论，可以将静态导入替换为运行时才执行的动态导入import()，示例如下：

import { AfterViewInit, Component } from '@angular/core';

console.log((window as any).external_component_stuff); // 此时输出为 undefined
debugger;

// 动态导入为运行时执行，不会被提升
const { ExternalComponent } = await import('@scope/external-component');

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