关于type="module"脚本变量不可访问及import使用的技术疑问

ES模块和普通脚本的核心差异在于作用域机制：

• 当script标签设置type="module"时，浏览器会将对应JS文件解析为ES模块，模块拥有独立的私有作用域，顶层声明的变量、函数不会自动挂载到全局对象（如window）。控制台直接访问变量时，是在全局作用域查找，自然找不到模块内部的私有变量，所以显示undefined。
• 不设置type="module"的普通脚本会运行在全局作用域，顶层声明的变量会自动挂载到window对象，因此控制台能直接访问到这些变量。

举个直观对比：

• 普通脚本（无type="module"）：

  // someJS.js
  const demoVar = "test content";
  

  控制台输入demoVar或window.demoVar，都能得到"test content"。
• 模块脚本（有type="module"）：

  // someJS.js
  const demoVar = "test content";
  

  控制台输入demoVar会返回undefined。如果需要让控制台能访问，得手动将变量挂载到全局：window.demoVar = demoVar;，不过这违背了模块作用域隔离的设计初衷。

• 必须设置type="module"：浏览器原生支持ES模块的import/export语法的前提，就是把脚本标记为type="module"。如果不设置，浏览器会将import识别为非法语法，直接抛出错误。
• 可行的替代方案：
  • 构建工具打包：像Webpack、Vite、Rollup这类工具，能将带有import/export的模块化代码，打包成不依赖ES模块机制的普通JS文件。打包后的代码会处理所有模块依赖关系，最终输出的文件可以用普通script标签引入，无需设置type="module"。
  • 动态导入函数import()：普通脚本中可以使用动态导入函数import('./module.js')，它返回一个Promise，适合按需加载场景。不过本质上它依然基于浏览器的ES模块系统，只是不需要提前标记type="module"。
  • 转译CommonJS语法：如果是Node.js环境，可以使用CommonJS的require()语法替代import，但浏览器本身不支持CommonJS，必须通过Babel等工具转译为浏览器能识别的代码。

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