HTML无法识别script.js导出的outputHTML变量如何解决

代码存在3个核心问题导致变量无法被识别：

1. ES模块语法未正确声明：浏览器默认将<script>标签当作普通脚本解析，不识别import/export的ES模块语法，只要脚本中使用了模块导入导出语法，对应script标签必须添加type="module"属性，当前两处script标签都写的是type="text/javascript"，解析阶段就会直接抛出语法错误。
2. 脚本重复加载：head标签里已经用普通脚本模式引入了一次script.js，后面内联脚本里又用import语法重复引入，普通脚本模式下export属于非法语法，且模块内部的变量不会泄露到全局作用域，两种加载方式混用必然无法获取目标变量。
3. 本地文件协议限制：如果直接双击打开index.html（走file://协议），浏览器会拦截ES模块的跨域请求，就算标签属性配置正确也会加载失败，必须在HTTP服务环境下预览页面，Node生态下可以非常方便地启动本地静态服务。

• 删掉head标签里多余的script.js引入代码，不需要重复加载脚本
• 给写内联逻辑的script标签加上type="module"属性，适配ES模块语法规则
• 本地预览时不要直接双击打开html文件，在项目目录执行npx serve（Node环境自带npx工具即可直接运行）启动静态服务，通过服务返回的本地地址访问页面

script.js #

var outputHTML = '';     
var animals = ["cat", "dog", "goat", "turkey", "buffalo"];

// 遍历数组拼接HTML字符串
outputHTML += "<table>";
for (var i = 0; i < animals.length; i++) {
    outputHTML += "<tr>";
    outputHTML += "<td>" + animals[i] + "</td>";
    outputHTML += "</tr>";
}
outputHTML += "</table>";

export { outputHTML };

index.html #

<!DOCTYPE html>
<html>
<head>
    <!-- 已删除此处多余的script.js引入代码 -->
</head>
<body>
    <button onclick="f()">
        Click To Access Animals
    </button>

    <div>
        <p id="text" style="color:purple;font-weight:bold;font-size:20px;">
        </p>
    </div>
    
    <!-- 添加type="module"声明为ES模块脚本 -->
    <script type="module">
        import { outputHTML } from './script.js';

        function f() {
           document.getElementById("text").innerHTML = outputHTML;
        }
    </script>
</body>
</html>

修改完成后点击按钮，即可正常将动物列表以表格形式渲染到页面。

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