JavaScript导入模块后main.js中renderContent函数未定义问题

我有一个Node.js网页服务器，文件夹结构如下：

server.js
public/
    |_ index.html
    |_ main.js
    |_ pages_content/
        |_contents.js

server.js用于提供public/目录内容：

var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');

app.get('/', function(req, res) {
    res.sendFile(path.join(public, 'index.html'));
});

app.use('/', express.static(public));

app.listen(8080);

index.html里的导航栏通过onClick绑定了renderContent函数：

<body>
        <nav id = "navbar">
            <div id = "projects" onClick="renderContent(this)" class = "navItem activeNavItem">PROJECTS</div>
            <div id = "experiences" onClick="renderContent(this)" class = "navItem">EXPERIENCE</div>
            <div id = "resume" onClick="renderContent(this)" class = "navItem">RESUME</div>
        </nav>

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

main.js定义了renderContent和activateNavbar函数，并导入了contents.js里的内容：

import {PROJECTS_CONTENT} from '/pages_content/contents.js'

const renderContent =  function(navItem){
    contentOptionId = navItem.id
    activateNavbar(contentOptionId)
    console.log(PROJECTS_CONTENT)
}

const activateNavbar = function(optionId){
    NAVBAR_SELECTOR = "#navbar"
    ACTIVE_ITEM_CLASS = "activeNavItem"
    const navBar = document.querySelector(NAVBAR_SELECTOR)
    for (navItem of navBar.children){
        if(navItem.id === optionId){
            navItem.classList.add(ACTIVE_ITEM_CLASS)
        } else {
            navItem.classList.remove(ACTIVE_ITEM_CLASS)
        }
    }
}

contents.js导出内容对象：

const PROJECTS_CONTENT = [
    {
        "title": "Certificate Generator",
        "firstParagraph": "Node.js batch script that parses a .csv file and generates .pdf certificates for each line/person",
        "firstImgUrl": "images/certificate0.png",
        "secondImgUrl": "images/certificate.png",
        "projectUrl": "https://github.com/USPCodeLabSanca/Node-Batch-Certificate-Generator",
        "secondParagraph": "Mentor of the project, responsible for idealizing, writing requirements, spliting requirements in features divided across team and coding",
        "thirdParagraph": "Used in real life recurrently for generating USPCodelab courses, hackathons and other events certificates."
    }
]

export {PROJECTS_CONTENT}

将脚本设为type="module"后，PROJECTS_CONTENT导入正常，但点击导航项时抛出错误：

Uncaught ReferenceError: renderContent is not defined
    onclick http://localhost:8080/:1

尝试导出renderContent也无效，求解决方法。

问题核心：ES模块（type="module"）的作用域是独立的，模块内定义的变量/函数不会自动暴露到全局作用域，而HTML内联onClick只能访问全局作用域中的函数。

以下是两种可行解决方式：

方法1：将函数挂载到全局对象 #

在main.js末尾把renderContent挂载到window对象，让全局作用域能访问到它：

import {PROJECTS_CONTENT} from '/pages_content/contents.js'

const renderContent =  function(navItem){
    contentOptionId = navItem.id
    activateNavbar(contentOptionId)
    console.log(PROJECTS_CONTENT)
}

const activateNavbar = function(optionId){
    NAVBAR_SELECTOR = "#navbar"
    ACTIVE_ITEM_CLASS = "activeNavItem"
    const navBar = document.querySelector(NAVBAR_SELECTOR)
    for (navItem of navBar.children){
        if(navItem.id === optionId){
            navItem.classList.add(ACTIVE_ITEM_CLASS)
        } else {
            navItem.classList.remove(ACTIVE_ITEM_CLASS)
        }
    }
}

// 挂载到全局window对象
window.renderContent = renderContent;

修改后，HTML内的onClick="renderContent(this)"即可正常调用函数。

方法2：使用事件监听替代内联onClick（推荐） #

内联事件绑定不利于代码维护，更优方式是在模块中通过JS添加事件监听，无需暴露全局函数：

1. 修改index.html，移除内联onClick属性：

<body>
        <nav id = "navbar">
            <div id = "projects" class = "navItem activeNavItem">PROJECTS</div>
            <div id = "experiences" class = "navItem">EXPERIENCE</div>
            <div id = "resume" class = "navItem">RESUME</div>
        </nav>

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

2. 在main.js中添加事件监听逻辑：

import {PROJECTS_CONTENT} from '/pages_content/contents.js'

const activateNavbar = function(optionId){
    const NAVBAR_SELECTOR = "#navbar"
    const ACTIVE_ITEM_CLASS = "activeNavItem"
    const navBar = document.querySelector(NAVBAR_SELECTOR)
    for (const navItem of navBar.children){
        if(navItem.id === optionId){
            navItem.classList.add(ACTIVE_ITEM_CLASS)
        } else {
            navItem.classList.remove(ACTIVE_ITEM_CLASS)
        }
    }
}

const renderContent =  function(navItem){
    const contentOptionId = navItem.id
    activateNavbar(contentOptionId)
    console.log(PROJECTS_CONTENT)
}

// 页面加载完成后，给所有导航项绑定点击事件
document.addEventListener('DOMContentLoaded', () => {
    const navItems = document.querySelectorAll('.navItem');
    navItems.forEach(item => {
        item.addEventListener('click', () => renderContent(item));
    });
});

这种方式符合现代前端规范，避免全局作用域污染，代码也更易维护。

另外注意：你的代码中contentOptionId、NAVBAR_SELECTOR等变量未用const/let声明，会隐式变为全局变量，建议添加声明避免意外问题。

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