如何在构建时将补丁/差异复制并应用到 svelte 文件？

Question

我正在使用 sveltekit 构建一个 svelte npm 模块。它提供除了几行之外完全相同的组件。我想根据原始组件生成其中一个组件。如何复制文件并在构建时对其应用补丁/差异？我应该看看 svelte 预处理器、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

已证明对我非常有价值）。

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

也就是说，玩得开心！