Node.js开发登录功能遇初始化前访问词法声明、require未定义错误

1. 报错 require is not defined 的解决 #

require 是Node.js服务端专属的CommonJS模块化语法，无法在浏览器端运行的前端JS中直接使用，你当前编写的login.js和script.js都是在用户浏览器中执行的前端脚本，因此不支持该语法。
修复有两种可选方案：

• 方案1（更适合新手）：放弃模块化导入导出，直接在HTML中按依赖顺序引入两个JS文件，引入后定义的函数可直接全局调用
• 方案2：改用浏览器支持的ES Module规范，脚本引入时加type="module"属性，导出用export、导入用import语法

2. 报错 can't access lexical declaration 'log' before initialization 的解决 #

报错由两个原因共同导致：一是require语法不被浏览器识别，log变量根本没有成功赋值；二是你在HTML的onClick属性中调用log()时，script.js可能还未加载完成，变量还未完成声明。

其他代码逻辑错误修复 #

你当前的代码还有多处语法和逻辑问题，统一修复如下：

修复后的login.js（采用全局引入方案，无需导出） #

// 原变量赋值语法错误，补充等于号、正确的属性分隔符、字符串引号
let login = {
    login: 'Cat',
    haslo: 123
}

function Logowanie(x, y){
    if (x == login.login && y == login.haslo){
        const zmianaTla = document.getElementById('overlay');
        const udanyLogin = document.getElementById('logon');
        zmianaTla.classList.remove('active');
        udanyLogin.remove();
    } else {
        alert("Niepoprawny login lub haslo");
    }
}

修复后的script.js #

// 原代码在页面加载时就获取输入值，永远拿到空值，要把取值逻辑放到点击触发的函数内
function handleLogin() {
    const x = document.getElementById('login').value;
    const y = document.getElementById('haslo').value; 
    Logowanie(x, y)
}

修复后的HTML部分 #

<!-- 调整脚本引入顺序，先引入依赖的login.js，再引入主脚本 -->
<script src="./login.js"></script>
<script src="./script.js"></script>
<div class="logon" id="logon">
     <h1>Logowanie</h1>
      <label for="Log"><b>Login</b></label>
       <input type="text" id="login" name="login" required>
            <label for="Haslo"><b>Hasło</b></label>
            <input type="password" id="haslo" name="haslo" required>
            <!-- 调用封装好的点击处理函数 -->
            <button type="submit" class="b1" onClick="handleLogin()"> Login </button>
    </div>
    <div class="active" id="overlay"></div>

额外注意事项 #

你当前把账号密码硬编码在前端JS中的做法完全没有保密效果，所有用户打开网页查看源码都能直接看到明文账号密码，不存在“避免站点检查时查看到函数内容”的作用，涉及身份校验的敏感逻辑必须放到服务端实现，前端仅负责传参给服务端接口做验证。

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