Sapper转SvelteKit后moment-hijri无法使用的解决方法及替代方案

一、修复moment-hijri的使用问题 #

SvelteKit基于Vite构建，默认使用ES模块，而moment-hijri属于CommonJS模块，直接在组件中导入会出现兼容性问题，可通过以下两种方式解决：

1. 动态导入（客户端仅加载） #

在组件中使用onMount配合动态导入，确保包在客户端环境加载：

<script>
    import { onMount } from 'svelte';
    let moment;

    onMount(async () => {
        const hijriModule = await import('moment-hijri');
        moment = hijriModule.default;
        
        // 示例：转换公历日期到回历
        const hijriDate = moment('2024-05-20').format('iYYYY/iM/iD');
        console.log(hijriDate);
    });
</script>

2. 配置Vite优化依赖 #

在项目根目录的svelte.config.js中添加Vite配置，让Vite正确处理moment和moment-hijri：

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        vite: {
            optimizeDeps: {
                include: ['moment', 'moment-hijri']
            },
            ssr: {
                // 避免SSR时处理该包的兼容性问题
                noExternal: ['moment-hijri']
            }
        }
    }
};

export default config;

配置完成后重启开发服务，即可正常导入使用。

二、替代npm包推荐 #

moment及moment-hijri已进入维护模式，推荐使用更轻量、现代化的替代方案：

1. Luxon #

Luxon是moment团队推出的现代化日期库，原生支持伊斯兰历（回历）转换，无需额外插件：

• 安装：npm install luxon
• 使用示例：

<script>
    import { DateTime } from 'luxon';

    // 将公历日期转换为回历
    const gregorianDate = DateTime.fromISO('2024-05-20');
    const formattedHijri = gregorianDate.toFormat('iYYYY/iM/iD');
</script>

<p>回历日期：{formattedHijri}</p>

2. HijriDate #

专门用于回历与公历转换的轻量包：

• 安装：npm install hijri-date
• 使用示例：

<script>
    import HijriDate from 'hijri-date';

    // 公历转回去历
    const hijri = new HijriDate(2024, 5, 20);
    const hijriStr = hijri.format('YYYY/MM/DD');
</script>

<p>回历日期：{hijriStr}</p>

3. @hijra/core #

专注于回历计算的现代ES模块包：

• 安装：npm install @hijra/core
• 使用示例：

<script>
    import { GregorianToHijri } from '@hijra/core';

    const hijriDate = GregorianToHijri(2024, 5, 20);
    const hijriStr = `${hijriDate.year}/${hijriDate.month}/${hijriDate.day}`;
</script>

<p>回历日期：{hijriStr}</p>

内容的提问来源于stack exchange，提问作者Md Anamul Hoque