如何为Vite配置XSLT XML文件修改后的热重载功能？

方案一：自定义Vite插件（灵活可控） #

无需找现成插件，自己写个轻量插件就能实现需求，步骤如下：

1. 在项目根目录创建vite-plugin-xslt-transform.js文件，代码如下：

import { execSync } from 'child_process';
import path from 'path';

export default function xsltTransformPlugin() {
  // 替换成你实际的文件路径
  const xmlPath = path.resolve(__dirname, 'src/data/content.xml');
  const xsltPath = path.resolve(__dirname, 'src/xsl/style.xsl');
  const outputHtmlPath = path.resolve(__dirname, 'index.html');

  // 启动时先执行一次转换
  executeTransform();

  return {
    name: 'xslt-transform',
    configureServer(server) {
      // 监听XML文件变化
      server.watcher.add(xmlPath);
      server.watcher.on('change', (file) => {
        if (file === xmlPath) {
          executeTransform();
          server.ws.send({ type: 'full-reload' });
        }
      });
      // 可选：监听XSLT文件变化，同样触发转换刷新
      server.watcher.add(xsltPath);
      server.watcher.on('change', (file) => {
        if (file === xsltPath) {
          executeTransform();
          server.ws.send({ type: 'full-reload' });
        }
      });
    }
  };

  function executeTransform() {
    // 执行你package.json中配置的xslt3命令
    execSync(`xslt3 -s:${xmlPath} -xsl:${xsltPath} -o:${outputHtmlPath}`);
    console.log('XSLT转换完成，HTML已更新');
  }
}

2. 在vite.config.js中引入并启用插件：

import xsltTransformPlugin from './vite-plugin-xslt-transform';

export default {
  plugins: [xsltTransformPlugin()]
};

方案二：借助文件监听工具（更简便） #

不想写插件的话，用chokidar-cli监听文件变化并触发转换，结合Vite自身的HTML监听实现刷新：

1. 安装依赖：

npm install chokidar-cli --save-dev

2. 修改package.json的脚本配置：

{
  "scripts": {
    "dev": "vite & npm run watch-xslt",
    "watch-xslt": "chokidar \"src/**/*.xml\" \"src/**/*.xsl\" -c \"xslt3 -s:src/data/content.xml -xsl:src/xsl/style.xsl -o:index.html\"",
    "build": "xslt3 -s:src/data/content.xml -xsl:src/xsl/style.xsl -o:dist/index.html && vite build"
  }
}

3. 启动开发服务：

npm run dev

当XML或XSLT文件修改时，chokidar会自动执行xslt3转换，Vite会监听生成的HTML文件变化并自动刷新浏览器。

关于xslt3 CLI的合理性说明 #

xslt3（SaxonJS）是前端处理XSLT 3.0的主流工具，支持完整的XSLT特性，如果你需要处理复杂的转换逻辑，这个方案是很合适的。若你的XSLT逻辑简单，也可以考虑在浏览器端用原生XSLTProcessor API动态转换，但开发效率和性能不如CLI预生成静态HTML。

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