使用JavaScript模块方法时遇Uncaught ReferenceError: starts未定义问题求助

你遇到的Uncaught ReferenceError: starts is not defined错误，核心原因有两个：

1. ES模块的作用域隔离：通过type="module"加载的JS文件会处于独立作用域，导出的变量不会自动挂载到全局window对象上，所以普通<script>里的starts()找不到这个函数。
2. 模块导入错误：connect.js里的start函数没有导出，main.js里的import {start} from './connect.js'会直接失败，导致后续代码无法正常执行。

修复步骤 #

1. 修正connect.js，导出start函数 #

export function start(){
    console.log("ok");
}

2. 选择以下两种方案之一解决全局访问问题 #

方案一：将starts挂载到全局window对象

修改main.js，把starts绑定到window上，让普通脚本能访问：

import { start } from './connect.js';

function starts(){
    start();
    console.log("started script");
}

// 挂载到全局
window.starts = starts;

同时调整HTML里的脚本顺序，确保模块加载时机正确（给普通脚本加defer，让它和模块同步加载）：

<html>
    <head>
        <script type="module" src="./connect.js"></script>
        <script type="module" src="./main.js"></script>
    </head>
    <body>
       <script type="text/javascript" defer>
        window.onload=function(ev){
          starts();
        };
       </script>
    </body>
</html>

方案二：直接在模块内监听页面加载（更推荐）

把页面加载的逻辑放到main.js里，避免全局变量依赖：

import { start } from './connect.js';

function starts(){
    start();
    console.log("started script");
}

// 直接在模块中监听window加载事件
window.addEventListener('load', starts);

然后简化HTML，去掉多余的普通脚本：

<html>
    <body>
    </body>
    <script type="module" src="./main.js"></script>
</html>

这样就能解决错误，正常执行代码了。

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