Hugo站点集成tw-elements时脚本未导出至public文件夹问题咨询

我自己在Hugo站点里加过同款轮播，90%的脚本不导出问题都是下面几个漏配项导致的，按顺序排查就行：

• 第一步先确认本地依赖安装：必须在Hugo项目根目录执行过npm install tw-elements，把包装到本地node_modules目录，光改配置文件不装包肯定找不到对应资源。
• 检查tailwind配置完整性：很多人只记得在plugins数组里加tw-elements插件，漏了content路径配置，tailwind树摇的时候会把tw-elements的样式和关联逻辑直接清掉。需要在tailwind.config.js的content数组里追加tw-elements的源码路径：

content: [
  "./layouts/**/*.html",
  "./content/**/*.{md,html}",
  "./assets/**/*.{js,css}",
  "./node_modules/tw-elements/dist/js/**/*.js"
],
plugins: [require("tw-elements/dist/plugin.cjs")]

• 检查JS入口的显式引入：tw-elements的交互逻辑不会因为你加了tailwind插件就自动打包，必须在你自定义的JS入口文件（一般放在assets/js/main.js）里手动引入对应模块并初始化：

// 按需引入Carousel模块，打包体积更小
import { Carousel, initTE } from "tw-elements";
initTE({ Carousel });

// 嫌麻烦可以直接全量引入
// import "tw-elements";

• 检查Hugo JS构建管道配置：Hugo Pipes处理JS的时候默认不会解析node_modules里的依赖，你在模板里引入JS资源的时候，必须给js.Build传nodeModules参数，不然构建时根本识别不了tw-elements的import语句，自然不会把相关代码导出到public目录。模板里的脚本写法参考：

{{ $mainJs := resources.Get "js/main.js" | js.Build (dict "nodeModules" "node_modules") | minify | fingerprint }}
<script src="{{ $mainJs.RelPermalink }}" defer></script>

• 最后检查DOM属性：轮播最外层容器必须加上data-te-carousel-init标记，不然就算脚本加载成功也不会自动初始化轮播。

小提示：如果本地开发hugo server的时候正常，正式构建出问题，先把public目录全删了重新构建，很多时候是旧构建缓存导致的资源异常。

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