纯HTML页面使用date-fns遇报错：Failed to resolve module specifier，求解决

方案1：使用全局变量（最简单） #

修改script.js，移除import语句，直接调用全局的dateFns对象方法：

// 移除 import { differenceInDays, differenceInHours } from 'date-fns';

const transactions = [
  { amount: 200, date: new Date('2024-07-16T21:31:17.178Z') },
  { amount: 455.23, date: new Date('2024-07-16T07:42:02.383Z') },
  { amount: -306.5, date: new Date('2024-07-15T09:15:04.904Z') },
  { amount: 25000, date: new Date('2024-07-14T10:17:24.185Z') },
  { amount: -642.21, date: new Date('2024-07-13T14:11:59.604Z') },
  { amount: -133.9, date: new Date('2024-07-12T17:01:17.194Z') },
  { amount: 79.97, date: new Date('2024-07-11T23:36:17.929Z') },
  { amount: 1300, date: new Date('2024-07-10T23:51:36.790Z') }
];

const container = document.getElementById('transactions');

function formatTransactionDate(date) {
  const now = new Date();
  // 改用全局对象调用方法
  const daysPassed = dateFns.differenceInDays(now, date);
  const hoursPassed = dateFns.differenceInHours(now, date);

  if (daysPassed === 0 && hoursPassed < 24) {
    return "Today";
  } else if (daysPassed === 1) {
    return "Yesterday";
  } else {
    return `${daysPassed} days ago`;
  }
}

function displayTransactions() {
  transactions.forEach(transaction => {
    const formattedDate = formatTransactionDate(transaction.date);
    const transactionElement = document.createElement('div');
    transactionElement.classList.add('transaction');
    transactionElement.innerHTML = `
      <span>Amount:</span> ${transaction.amount.toFixed(2)}<br>
      <span>Date:</span> ${formattedDate}<br>
    `;
    container.appendChild(transactionElement);
  });
}

displayTransactions();

保留HTML中加载date-fns的全局版本脚本：

<script src="https://cdn.jsdelivr.net/npm/date-fns@latest"></script>

方案2：使用ES模块版本（符合现代模块规范） #

方法A：直接导入具体模块路径 #

修改script.js的import语句为CDN的ES模块地址，并移除HTML中全局版本的脚本：

import { differenceInDays, differenceInHours } from 'https://cdn.jsdelivr.net/npm/date-fns@3.6.0/esm/index.js';

// 剩余代码不变

方法B：使用Import Maps（简化模块名） #

在HTML的<head>中添加导入映射，让浏览器识别"date-fns"对应的模块地址：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transaction Dates</title>
  <!-- 添加Import Map -->
  <script type="importmap">
    {
      "imports": {
        "date-fns": "https://cdn.jsdelivr.net/npm/date-fns@3.6.0/esm/index.js"
      }
    }
  </script>
  <!-- 样式内容 -->
</head>

这样你可以继续使用原来的import语句，同时移除HTML中全局版本的date-fns脚本。

错误原因说明 #

• 你的script.js是type="module"，浏览器会按ES模块规则解析import，但"date-fns"属于裸模块说明符（无路径前缀），浏览器默认无法解析（仅构建工具如Webpack/Vite会处理这类裸模块）。
• 你通过CDN引入的是date-fns的UMD/全局版本，它会将方法挂载到全局dateFns对象，而非以ES模块形式暴露，因此无法通过import直接导入。
• 你的package.json和package-lock.json在纯HTML环境中无效，浏览器不会读取npm依赖配置，这些文件仅在使用npm+构建工具时需要。

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