如何将包含的Pug文件添加到Vite模块图中

Question

我编写了一个将Pug作为HTML字符串导入的Rollup插件：

// Rollup plugin imported to Vite config

import { render } from 'pug';

export default function pug() {
  return {
    name: 'rollup-plugin-pug-html',

    transform(src, id) {
      if (id.endsWith('.pug')) {
        const html = render(src, { filename: id });
        const code = `export default ${JSON.stringify(html)};`;

        return { code };
      }
    },
  };
}

我在Vite中使用它为Vue组件创建模板，如下面这个简化的示例所示：

// ProofOfConceptSFC.vue

<script>
import { compile } from 'vue/dist/vue.esm-bundler.js';
import template from './template.pug';

export default {
  render: compile(template)
};
</script>

当我编辑template.pug时，HMR工作得很好。出现新的模板，并保留最新的反应性值。

我的问题是template.pug可能依赖于带有include的其他Pug文件

//- template.pug

include ./header.pug
p Hello {{ name }}
include ./footer.pug

Vite服务器不知道这些文件，如果我触摸它们，就不会发生任何事情。理想情况下，当任何Pug文件被更改时，我都可以使template.pug失效。

我猜我希望我的插件能够更新ViteDevServer的server.moduleGraph。有什么可支持的方法吗？

Answer 1

非常感谢友好的在不和谐中聊天为我设定了正确的方向。

我丢失的两把钥匙：

1. 使用Pug compile创建具有render.dependencies、就像包裹一样的render方法
2. 使用虚拟导入语句将依赖项附加到转换钩子结果由vite-plugin-svelte完成。

下面是正在运行的插件：

import { compile } from 'pug';

export default function pluginPug() {
  return {
    name: 'vite-plugin-pug',

    transform(src, id) {
      if (id.endsWith('.pug')) {
        const render = compile(src, { filename: id });
        const html = render();
        let code = '';

        for (let dep of render.dependencies) {
          code += `import ${JSON.stringify(dep)};\n`;
        }

        code += `export default ${JSON.stringify(html)};`;

        return { code };
      }
    },
  };
}