vite中间件或插件动态重写模块路径解析？

Question

我正在构建一个应用程序，该应用程序使用 Vite API 和开发服务器来查看其他项目（全部在本地 fs 上）中的渲染反应组件及其层次结构。当所有导入都是相对路径并且我们实际上希望这些导入以默认的相对方式解析时，这工作正常。

然而，我们实际上希望相对导入首先解析相对于我们的“复制”目录，然后仅解析为实际的相对路径作为后备。对别名、node_modules 等的类似需求。我刚刚开始研究这个，但想知道是否有人对如何实现它有粗略的了解。我猜这对于普通配置来说太混乱了，所以我希望编写一个插件或中间件来拦截路径，进行一些手动检查，然后根据需要重写路径，听起来对吗？或者也许我拦截打开的文件并从可能更改的位置返回以字节为单位的读取？

任何人都知道一个插件/中间件可以做类似的事情我可以检查一下吗？

（此外，虽然我在 Vite 文档中看到很多中间件，但我在任何地方都看不到顶级“如何使用中间件”页面）

Answer 1

您可以轻松创建一个 vite/rollup 插件来重写模块解析路径。这是一个简单的例子：

function testPlugin(opts = {}): PluginOption[] {
    return [{
        name: 'test-plugin',
        enforce: 'pre',
        resolveId() {
            if (arguments[0].includes('.tsx') && !arguments[0].includes('__inspect')) {
                console.log('--- resolveId', arguments[0])
            }
        },
        load(id) {
            if (id.includes('.tsx') && !id.includes('__inspect')) {
                console.log('--- load', id)
            }
        }
    }]
}

在这种情况下，您希望将 resolveId body 替换为将 arguments[0] munges 到您想要的新路径并返回它的东西（而不是上面示例中的 undefined ）。

enforce: pre 的使用对于确保其他插件在您访问它们之前不会修改这些路径很重要。同样的，当你在你的 vite 配置中注册这些插件时，你需要先注册这个插件。