我有一个使用十一、tailwindcss 和 nunjucks 的静态站点。这是我的第一次，总的来说真的很喜欢，但我仍然觉得布局有点混乱。
我想创建一个包含可重用组件的页面，每个组件包含两个部分。组件的示例显示，然后在其下方包含要复制和粘贴的组件代码的 div。
在我的/src/utils/ 目录中，我添加了一个简单的切换功能来添加和删除类'block'（tailwindcss）
我不明白如何在我的 /src/site/components.njk 文件代码中访问该功能以将功能添加到我的页面。
大量冗长的谷歌和鸭子去查询没有返回太多信息，因此感谢任何和所有帮助
【问题讨论】：
标签： javascript nunjucks eleventy
由于您希望在客户端拥有该功能，因此您需要确保您的 JavaScript 包含在您的站点输出中。由于您的 /src/ 目录仅存在于您的存储库中，因此在您的站点构建后，浏览器将无法使用它。使其可供浏览器访问的最简单方法是将 JavaScript 文件复制到输出目录，然后将其作为脚本包含在 HTML 输出中。确保 URL 与输出位置匹配。例如，如果你的源文件是/src/utils/component-toggle.js，你的输出目录是/dist/，你把文件复制到/dist/utils/component-toggle.js，那么脚本标签应该是这样的：
<script src="/utils/component-toggle.js" defer></script>
请参阅Passthrough file copy，了解如何在构建步骤中复制静态文件。
确保您的 JavaScript 文件也可以在浏览器上下文中工作。例如，您不能使用 CommonJS（module.exports 和 require() 语法），因为它是一个 NodeJS 概念并且不存在于浏览器中。如果您使用 ES Module 语法（export default {} 语法），请确保它是 supported in all browser your site supports。
我最近就这个主题写了一个更长的答案，解释了为什么你必须这样做，以及静态站点生成器的构建时和运行时 JavaScript 之间的区别，如果你可以read it here想知道更多。
【讨论】：