JavaScript模块import/export失效问题求助（附代码示例）

问题核心 #

你的代码存在两个关键问题：

• 未将依赖脚本声明为ES模块，导致import/export语法无法生效
• 导入函数时未正确提取导出成员，且未确保DOM加载完成后执行高亮逻辑

修改后的完整代码 #

1. ColorText.js

export function ColorTextInBlue(target, str) {
    target.innerHTML = target.innerHTML.replace(new RegExp(str, 'g'),
        "<font color=\"#0000FF\">" + str + "</font>");
}

2. CSharp.js

// 正确导入需要的函数
import { ColorTextInBlue } from './ColorText.js';

function foo() {
    const blueWords = ["Task", "TaskScheduler", "void"];
    const codeBlocks = document.getElementsByClassName("csharp");
    
    for (let i = 0; i < codeBlocks.length; i++) {
        // 遍历所有需要高亮的词汇
        blueWords.forEach(word => {
            ColorTextInBlue(codeBlocks[i], word);
        });
    }
}

// 确保DOM加载完成后执行高亮逻辑
document.addEventListener('DOMContentLoaded', foo);

3. HTML部分

<!-- Scripts -->
<!-- 只需加载CSharp.js模块，它会自动导入ColorText.js -->
<script type="module" src="./CSharp.js"></script>

关键说明 #

• 所有使用import/export的脚本必须声明为type="module"，浏览器才会按ES模块规则解析
• 导入时需明确指定要使用的导出成员（import { 函数名 } from 文件路径），而非仅导入文件
• 必须等待DOM加载完成后再执行DOM操作，否则会找不到目标元素
• 无需单独加载ColorText.js，因为CSharp.js已作为模块导入了它

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