如何在构建时复制和应用补丁/diff到苗条文件?

Question

我正在用sveltekit构建一个苗条的npm模块。它提供的组件除了几行以外都是相同的。我想在原来的基础上生成一个组件。我如何复制文件并在构建时对其应用补丁/diff ?我应该研究苗条的预处理器，vite预处理器和构建，还是其他东西?

Answer 1

这其实很容易做到:-)

以以下为例:

import { readFileSync } from 'fs';
import { resolve } from 'path';
export default function () {
return {
name: 'my-plugin',
load(file) {
if (file === resolve(<target file path>)) {
let code = readFileSync(<original file path>, 'utf-8');
// Apply any patch required to `code`
return { code, map: null };
}
}
};
}

如果这个文件是myPlugin.js，那么你只需要像这样把它添加到你的vite.config.ts中:

import MyPlugin from 'myPlugin.js';
const config: UserConfig = {
plugins: [
MyPlugin()
]
};
export default config;

我有几个这样的插件，他们像魅力一样工作。通过查看Vite的文档，您甚至可以做一些奇特的事情，例如为客户端返回一些内容，为服务器返回另一些内容等。

然而，让我给你一个警告:这样做看起来很酷，我发现应用代码内解决方案比编译的解决方案要好得多，因为编译的解决方案不仅感觉很神奇，而且它们也偏离了真正的源代码，所以调试它可能会变得更复杂(在这种情况下，vite-plugin-inspect对我来说非常有价值)。

在你的情况下，我可能会尝试抽象或设计模式，如装饰器。但是，我不知道您的具体用例，所以请对我的建议持保留态度。

那就是说，玩得开心!