dayjs.isLeapYear报错‘is not a function’，求问题排查与解决

问题根源 #

你的代码存在三个核心问题：

1. 重复引入dayjs：同时通过CDN和node_modules引入dayjs，生成了两个独立的dayjs实例。你在module脚本里扩展的插件只作用于该模块内的实例，而外部leapCheck函数调用的是CDN引入的无插件实例。
2. script标签写法错误：带有src属性的type="module"脚本，标签内部的代码会被忽略，你的插件扩展逻辑根本没有执行。
3. 作用域隔离：ES Module内的变量默认是局部作用域，外部的leapCheck函数无法访问到模块内已扩展插件的dayjs实例。

修复方案 #

方案1：使用CDN完整引入（适合浏览器直接运行） #

直接通过CDN引入dayjs核心和插件，避免作用域问题：

<!-- 引入dayjs核心库 -->
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
<!-- 引入isLeapYear插件 -->
<script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/isLeapYear"></script>
<script>
  // 扩展插件到全局的dayjs实例
  dayjs.extend(dayjs_plugin_isLeapYear);

  // 定义你的闰年检查函数
  const leapCheck = () => {
    // 确保inputYear和currentYear是合法的日期输入（比如数字年份或日期字符串）
    const leapInputYear = dayjs(inputYear).isLeapYear();
    const leapCurrentYear = dayjs(currentYear).isLeapYear();
    // 这里可以添加结果处理逻辑，比如打印或更新DOM
    console.log('输入年份是否闰年：', leapInputYear);
    console.log('当前年份是否闰年：', leapCurrentYear);
  };
</script>

方案2：使用ES Module规范（适合现代开发环境） #

将代码拆分到独立的模块文件中，避免作用域冲突：

1. 创建app.js文件：

import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs/+esm';
import isLeapYear from 'https://cdn.jsdelivr.net/npm/dayjs/plugin/isLeapYear/+esm';

// 扩展插件
dayjs.extend(isLeapYear);

// 导出检查函数
export const leapCheck = (inputYear, currentYear) => {
  const leapInputYear = dayjs(inputYear).isLeapYear();
  const leapCurrentYear = dayjs(currentYear).isLeapYear();
  return { leapInputYear, leapCurrentYear };
};

2. 在HTML中引入模块：

<script type="module">
  import { leapCheck } from './app.js';
  
  // 示例调用，替换为你的实际年份变量
  const result = leapCheck(2024, new Date().getFullYear());
  console.log(result);
</script>

关键注意事项 #

• 不要同时使用多种方式引入dayjs，确保全局或模块内只有一个dayjs实例
• 若使用ES Module，必须通过本地服务器（如live-server）打开HTML，不能直接双击打开文件（会触发跨域问题）
• 确保inputYear和currentYear是dayjs可解析的合法值（如2024、'2024-01-01'）

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