域名转IP应用开发遇ES模块404及CommonJS错误求助

核心问题拆解 #

• 浏览器环境不支持Node.js的require和dns模块：之前用CommonJS的require报错，是因为浏览器没有Node.js的模块系统，dns是Node.js专属内置模块，浏览器里根本不存在。
• ES模块404错误：HTML里重复引入了两个模块文件，且check-ip.js已经导入了function.js，冗余引入会导致路径解析问题；另外要确认文件实际存放路径和代码里的引用路径完全一致。
• 代码逻辑漏洞：function.js里的check函数没接收参数，直接用value和showIP会触发未定义错误；获取输入框值的时机不对，页面加载时就取值会得到空字符串，应该在点击按钮时再获取。

分步修复方案 #

1. 替换Node.js的dns模块（浏览器无法使用） #

浏览器端不能直接用Node.js的dns模块，有两种替代方案：

方案一：用浏览器实验性DNS API（仅现代Chrome等支持）

修改function.js：

export default async function check(domain, showIPElement) {
  try {
    const addresses = await dns.resolve(domain);
    showIPElement.innerText = addresses[0];
  } catch (error) {
    showIPElement.innerText = `出错了: ${error.message}`;
  }
}

方案二：用第三方免费API（兼容所有浏览器）

修改function.js：

export default async function check(domain, showIPElement) {
  try {
    const response = await fetch(`http://ip-api.com/json/${domain}?fields=query,status,message`);
    const data = await response.json();
    if (data.status === 'success') {
      showIPElement.innerText = data.query;
    } else {
      showIPElement.innerText = `出错了: ${data.message}`;
    }
  } catch (error) {
    showIPElement.innerText = `请求失败: ${error.message}`;
  }
}

2. 修复ES模块引用与代码逻辑 #

修改check-ip.js，调整取值时机并完善参数传递：

import check from './function.js'; // ES模块在浏览器中必须带完整后缀

const getDNS = document.querySelector('.enter_dns');
const showIP = document.querySelector('.show_ip');
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  const value = getDNS.value.trim();
  if (!value) {
    showIP.innerText = '请输入域名';
    return;
  }
  check(value, showIP); // 将输入值和显示元素传给check函数
});

调整HTML的脚本引入，只保留主模块即可：

</head>
<body>
    <div class="content">
      <h2 class="header">输入网址查询IP:</h2>
      <span class="interaction">
        <input type="text" class="enter_dns" placeholder="例如: google.com">
        <button class="btn">查询</button>
      </span>
      <p class="show_ip"></p>
    </div>

    <script type="module" src="./js/check-ip.js"></script>

</body>
</html>

3. 解决404错误的注意事项 #

• 核对文件路径：确保check-ip.js和function.js确实存放在js文件夹下，与HTML文件的相对路径是./js/xxx.js
• 用本地服务器打开HTML：不要直接双击本地HTML文件，建议用npx serve启动临时服务器，避免触发路径解析或CORS问题

关键知识点提醒 #

• 浏览器环境≠Node.js环境：Node.js的内置模块（如dns、fs）不能在浏览器中直接使用，浏览器有专属的Web API
• ES模块浏览器使用规则：必须加type="module"，导入文件要带完整后缀（如.js），不能混用require
• 异步操作处理：DNS解析或网络请求都是异步操作，要用async/await或Promise处理

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