将 AlpineJS 与导入的 javascript 库结合使用答案

【问题标题】：Using AlpineJS in conjunction with imported javascript library将 AlpineJS 与导入的 javascript 库结合使用
【发布时间】：2022-11-29 11:57:34
【问题描述】：

所以我正在尝试使用 Tailwind/AlpineJS 构建一个基本的日历应用程序，并想使用 date-fns 作为我的日期库。我已经安装了 date-fns 包，现在我正试图让它在我的 HTML 中工作。

我在我的 HTML 文档的底部写了这个脚本，目标是 <div> 和 "x-data=calendarApp"

<script type="module">
    import {startOfToday} from 'date-fns';

    document.addEventListener('alpine:init', () => {
        Alpine.data('calendarApp', () => ({

            currentMonthAndYear: format(startOfToday(), 'MMMM yyyy'),

        }))
    })

</script>

认为这可能是范围问题，我也尝试了window.addEventListener，但控制台一直告诉我未定义 calendarApp。

使用具有相同 JavaScript 的非模块脚本标签是可行的。

【问题讨论】：

标签： javascript alpine.js date-fns

【解决方案1】：

根据文档自己解决（去图）。

https://alpinejs.dev/globals/alpine-data#registering-from-a-bundle

导入了一个新的 javascript 文件 (calendar.js) 并将其添加到 Alpine.Data。

【讨论】：