head中type="module"脚本定义的函数在body调用提示未定义

你碰到的报错来自两个核心原因：

• 代码本身有基础语法错误：一是import语句里的from你写成了大写开头的From，会直接触发语法报错；二是定义myFunction的时候没加function声明关键字，写法不符合JS语法规范。
• 最核心的原因：只要script标签加了type="module"，脚本内部声明的所有函数、变量都属于模块私有作用域，不会自动暴露到全局window对象，你在后面普通的非模块script里直接调用，根本访问不到模块内部的函数，自然会报未定义的错误。

给你两种可落地的方案，优先选第一种：

方案1：遵循ES模块规范，把逻辑都放在模块内（推荐） #

ES模块设计本身就是为了避免全局污染，不推荐随便往全局挂变量。模块脚本默认自带defer效果，会等整个DOM解析完成后再执行，完全不用担心执行时机问题，你直接把调用逻辑也放到模块脚本里就行，修正后的代码：

<!-- 放在head里的模块脚本 -->
<script type="module">
// 注意from全小写
import {g1} from './scripts/main.js';

// 补全function声明关键字
function myFunction(){
  // 你的业务逻辑，内部调用g1即可
}

// 直接在模块内调用，或者绑定DOM事件都可以
myFunction();
</script>

之后body里不需要额外写script调用，代码就能正常跑。

方案2：手动暴露函数到全局（特殊场景用） #

如果你确实需要在其他非模块脚本里调用这个函数，可以手动把函数挂载到window全局对象上，同时注意处理执行时机问题——模块脚本是异步加载的，要等模块加载完成再调用：
head里的模块脚本写法：

<script type="module">
import {g1} from './scripts/main.js';
// 手动挂载到全局
window.myFunction = function(){
  // 你的业务逻辑，调用g1
}
</script>

body里的调用代码要加加载完成判断，避免执行时机不对还是报未定义：

<script>
window.addEventListener('DOMContentLoaded', () => {
  myFunction();
})
</script>

提醒：非必要不要用第二种方案，全局变量多了很容易出现命名冲突、逻辑混乱的问题。

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