JS文件转为ES6模块后出现函数已声明但值未读取报错如何解决

这个问题的核心是ES模块的作用域隔离特性：

• 普通无type="module"属性的script脚本，顶层声明的变量、函数默认会挂载到全局window对象上，所以你可以在任意其他普通脚本里直接访问这些顶层声明。
• 一旦script标签加上type="module"属性，对应的文件就会被识别为ES模块，所有顶层声明默认都是模块私有的，既不会自动挂载到window全局对象，也不允许外部非模块脚本直接访问。

你最初的写法里，drawBalls.js被标记为模块后，内部的draw函数属于模块私有变量：模块内部没有调用它，也没有对外导出，所以IDE会提示「'draw' is declared but its value is never read」；而你在外部普通script里调用的draw实际是去全局window上找，自然找不到对应的函数，导致运行报错。

你移除import语句、去掉type="module"属性后，drawBalls.js变回普通脚本，draw自动挂载到window全局，所以可以正常调用。

你后续修改后的写法可以正常运行，依赖两个必要条件：

1. 你已经在drawBalls.js中为draw函数添加了导出声明：

export function draw(canvas){
  const maxRadius = 10;
  const minRadius = 5;
  // 其余逻辑省略
}

2. 你把调用逻辑也放到了type="module"的脚本中，通过import语句从drawBalls.js模块中引入了对外暴露的draw函数，ES模块之间通过导入导出的规则可以正常访问互相暴露的接口。

如果你不想把调用逻辑改为模块，也可以手动把draw挂载到全局对象上（不推荐，会污染全局作用域），只需要在drawBalls.js中添加一行：

window.draw = draw;

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