本文旨在解决 day.js 用户在使用 `isleapyear` 等插件时遇到的 "isleapyear is not a function" 错误。该问题通常源于在浏览器环境中未能正确加载和扩展 day.js 插件。我们将详细阐述通过 cdn 方式引入插件的正确步骤，强调通过 `window` 对象访问插件并使用 `dayjs.extend()` 方法进行注册，确保 day.js 核心功能能顺利集成扩展功能。
理解 Day.js 插件机制
Day.js 是一个轻量级的 JavaScript 日期处理库，它通过核心模块提供基本功能，并通过插件机制来扩展更多高级功能，例如判断闰年、UTC 时间处理等。当我们在代码中调用一个扩展功能（如 isLeapYear()）时，如果对应的插件没有被正确加载并注册到 Day.js 实例上，就会出现 "isLeapYear is not a function" 的错误。
问题的核心在于，当通过 CDN 引入 Day.js 及其插件时，插件通常会将自身注册到全局的 window 对象上，而不是通过 ES Module 的 import 语句直接导入。因此，需要通过特定的方式来引用这些全局对象并将其传递给 dayjs.extend() 方法。
常见的错误加载方式及其原因
许多开发者在初次使用 Day.js 插件时，可能会尝试以下类似的加载方式：
<!-- 错误示例：混合 CDN 与模块导入，或错误地在非模块脚本中尝试 import -->
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script><script type="module" src="node_modules/dayjs/dayjs.min.js">
// 这里的 import 语句可能无法正确工作，且与上方 CDN 引入的 dayjs 实例冲突
import dayjs from 'dayjs'
import isLeapYear from "dayjs/plugin/isLeapYear"; // 插件未通过此方式导出到全局
dayjs.extend(isLeapYear);
</script>
这种方式存在几个问题：
- 重复加载 Day.js：第一个 <script> 标签已经通过 CDN 全局加载了 Day.js。第二个 <script type="module"> 标签又尝试从 <a style="color:#f60; text-decoration:underline;" title= "node"href="https://m.php.cn/zt/15853.html" target="_blank">node_modules 导入 Day.js，这可能导致冲突或不必要的资源加载。</script>
- 插件导入方式错误：当 Day.js 核心库和插件都是通过 CDN 引入时，插件通常不会以 ES Module 的形式 (export default) 暴露给 import 语句。相反，它们会将自身挂载到 window 对象上，例如 window.dayjs_plugin_isLeapYear。直接使用 import isLeapYear from "dayjs/plugin/isLeapYear"; 在这种场景下是无效的。
- 脚本执行上下文：带有 src 属性的 <script type="module"> 标签，其内部的 JavaScript 代码通常不会被执行，而是会加载 src 指定的模块文件。如果想在模块脚本中执行内联代码，需要移除 src 属性或者使用单独的模块脚本。</script>
正确的插件加载与注册方式（浏览器/CDN 环境）
在浏览器环境中使用 CDN 引入 Day.js 及其插件时，正确的步骤是：
- 首先加载 Day.js 核心库。
- 然后加载所需的插件脚本。
- 最后，在另一个 <script> 标签中，使用 dayjs.extend() 方法，并通过 window 对象引用插件</script>。
以下是加载 isLeapYear 插件的正确示例：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Day.js isLeapYear 示例</title><h1>Day.js 闰年判断示例</h1>
<p id="result"></p>
<!-- 1. 加载 Day.js 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script><!-- 2. 加载 isLeapYear 插件 --><!-- 注意：插件版本号应与 Day.js 核心库版本号匹配，或使用最新稳定版 --><script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/isLeapYear.js"></script><!-- 3. 注册插件 --><script>
// 通过 window 对象访问已加载的插件
dayjs.extend(window.dayjs_plugin_isLeapYear);
// 现在可以使用 isLeapYear 方法了
const yearToCheck1 = '2000-01-01'; // 闰年
const yearToCheck2 = '2001-01-01'; // 平年
const yearToCheck3 = '2024-01-01'; // 闰年
const is2000Leap = dayjs(yearToCheck1).isLeapYear();
const is2001Leap = dayjs(yearToCheck2).isLeapYear();
const is2024Leap = dayjs(yearToCheck3).isLeapYear();
console.log(`${yearToCheck1} 是闰年吗？`, is2000Leap); // true
console.log(`${yearToCheck2} 是闰年吗？`, is2001Leap); // false
console.log(`${yearToCheck3} 是闰年吗？`, is2024Leap); // true
document.getElementById('result').innerHTML = `
${yearToCheck1} 是闰年吗？: ${is2000Leap}<br>
${yearToCheck2} 是闰年吗？: ${is2001Leap}<br>
${yearToCheck3} 是闰年吗？: ${is2024Leap}
`;
// 也可以检查当前年份
const currentYear = dayjs().year();
const isCurrentYearLeap = dayjs().isLeapYear();
console.log(`当前年份 ${currentYear} 是闰年吗？`, isCurrentYearLeap);
</script>
在上述示例中：
- 我们首先通过 https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js 加载了 Day.js 核心库。
- 接着通过 https://cdn.jsdelivr.net/npm/dayjs@1/plugin/isLeapYear.js 加载了 isLeapYear 插件。
- 这两个脚本加载后，isLeapYear 插件的实现会挂载到 window.dayjs_plugin_isLeapYear。
- 最后，我们使用 dayjs.extend(window.dayjs_plugin_isLeapYear); 将该插件注册到 Day.js 实例上，从而使 isLeapYear() 方法可用。
注意事项与最佳实践
-
加载顺序：务必确保 Day.js 核心库在任何插件之前加载，且插件在 dayjs.extend() 调用之前加载。
版本匹配：虽然 Day.js 插件通常具有良好的向后兼容性，但为了避免潜在问题，建议 Day.js 核心库和插件使用相同的版本号（如示例中的 @1）。
CDN 路径：不同 CDN 服务商或 Day.js 版本可能导致插件路径略有不同。通常，插件路径遵循 https://cdn.jsdelivr.net/npm/dayjs@
/plugin/ .js 的模式。 避免混用模块与全局加载：在浏览器环境中，如果通过 <script> 标签直接引入 CDN 资源，那么 Day.js 及其插件会作为全局变量（dayjs 和 window.dayjs_plugin_xxx）存在。此时不应再尝试使用 import 语句来导入它们，以免造成混淆或错误。</script>
-
模块化开发环境：如果你在一个使用 Webpack、Rollup 或 Vite 等打包工具的模块化项目中，插件的导入方式会有所不同。通常是直接通过 import 语句导入插件，然后传递给 dayjs.extend()：
// 在模块化项目（如 React, Vue 项目）中 import dayjs from 'dayjs'; import isLeapYear from 'dayjs/plugin/isLeapYear'; dayjs.extend(isLeapYear); const date = dayjs('2024-01-01'); console.log(date.isLeapYear()); // true这种方式在浏览器直接加载的场景下是行不通的，因为 import 语句需要一个模块加载器来解析。
总结
解决 Day.js 中 isLeapYear 等插件方法未定义的核心在于理解其在浏览器环境下的加载机制。通过 CDN 引入时，插件会将自身挂载到 window 对象上，因此需要通过 window.dayjs_plugin_PLUGIN_NAME 的形式来引用并使用 dayjs.extend() 方法进行注册。遵循正确的加载顺序和引用方式，可以确保 Day.js 的扩展功能能够顺利集成并正常工作。对于模块化项目，则应采用相应的 import 语法来引入和扩展插件。
