rollup-plugin-html 未生效的根本原因是 Rollup 默认不处理 HTML，需将 html() 插件置于 resolve() 和 commonjs() 之前，并配置 transformers、路径映射及环境变量注入方式。
rollup-plugin-html 为什么没生效？
常见现象是 HTML 文件被当成普通资源复制过去，里面 <script type="module"></script> 引用的 JS 没打包、import 语句没解析、process.env.NODE_ENV 不替换——根本原因：Rollup 默认只处理 .js 和 .ts，HTML 是“黑盒”。rollup-plugin-html 这类插件必须在 plugins 数组里靠前声明，且需配合 rollup-plugin-commonjs 或 @rollup/plugin-inject 等补全能力。
- 插件顺序很重要：
html()要放在resolve()和commonjs()之前，否则无法识别 HTML 中的import路径 - 必须启用
transformers：默认只做静态拷贝，要解析<script></script>块得显式传{ transformers: [htmlTransformScript] } - 注意路径基准：
public/下的 HTML 若含相对src="js/app.js"，Rollup 不会自动映射到源码目录，得用inject: { target: 'body' }+ 手动import控制
HTML 中的 script 标签怎么参与打包？
不是所有 <script></script> 都会被处理。只有带 type="module" 或无 type（且未设 noModule）的内联脚本，才可能被插件提取并走 Rollup 流程。外部脚本如 <script src="main.js"></script> 则依赖 resolveId 钩子能否定位到对应源文件。
- 内联模块脚本：
<script type="module">import { foo } from './utils.js'; console.log(foo());</script>→ 可被rollup-plugin-html提取编译 - 外部脚本：
<script src="./src/index.js"></script>→ 需确保路径能被@rollup/plugin-node-resolve解析，否则报Could not resolve './src/index.js' -
<script type="text/javascript"></script>或type="application/javascript"默认跳过，不进打包流程
如何让 HTML 中的环境变量正确注入？
process.env 在 HTML 里不会自动展开，哪怕你用了 @rollup/plugin-replace。它只作用于 JS 字符串，对 HTML 文本内容无效。真正起效的方式是：把变量注入到全局对象（如 window.__ENV），再在 HTML 的内联脚本中读取。
- 别写：
<script>console.log(process.env.NODE_ENV);</script>→ 保留原样，运行时报错 - 该写：
<script>console.log(window.__ENV.NODE_ENV);</script>，并在插件中用replace({ 'process.env.NODE_ENV': JSON.stringify('production') })+html({ inject: { head: '<script>window.__ENV = {...}</script>' } }) - 注意 JSON 安全：
JSON.stringify处理值，避免直接拼接字符串导致 XSS 或语法错误
rollup-plugin-html 和 vite-plugin-html 冲突吗？
会。如果你项目同时用 Rollup 和 Vite（比如在 Vite 插件里调 Rollup 实例），rollup-plugin-html 和 vite-plugin-html 都监听 .html 后缀，且都试图接管 transform 钩子，结果就是 HTML 被处理两次或其中一方失效。Vite 场景下优先用后者；纯 Rollup 构建才用前者。
- Vite 用户：删掉
rollup-plugin-html，改用vite-plugin-html的inject: { data: { title: 'My App' } }注入变量 - Rollup CLI 用户：确认没有
vite相关依赖混入rollup.config.js，尤其检查node_modules是否意外装了 Vite 插件 - 两者共存时，
enforce: 'pre'不能解决冲突，因为 HTML 处理本质是资源加载阶段，不是 transform 阶段
HTML 入口的难点不在“能不能转”，而在“哪些内容算入口、哪些只是模板占位”。很多人卡在 没被转成 hash 文件名，其实是因为 CSS 没走 Rollup 插件链——它需要单独配 rollup-plugin-postcss 或 @rollup/plugin-url，而不是指望 HTML 插件自动接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
