npm库应该如何将文件放入公共文件夹?

Question

(我有一个Vue/Vite应用程序，但我认为这个问题是通用的任何设置)

在我的应用程序中，我有一些代码，我想把它们泛化到一个单独的npm库包中，这样它就可以在多个应用程序中使用。这需要在应用程序的公共文件夹中放置一个文件，但我不确定这样做的最佳实践方式是什么。

(这个文件是一个service worker，但我认为这与问题无关——对于任何需要公共URL的文件来说都是一样的。)

我希望这个库的使用尽可能干净。也就是说，我不想告诉客户端"将此文件复制到您的公共文件夹"。

我认为复制步骤需要在某个地方发生，除非有一种方法告诉Vite将文件添加到它所打包的文件中。

复制步骤可能是在运行npm install时，我猜。如果需要的话，还可以在.gitignore中添加一行，那就太好了。我认为这很复杂，因为无论应用程序是Vue, next还是其他框架，实际位置都是不同的。

我不认为复制步骤可以是当import mylib from "mylib"，因为这发生在应用程序已经打包后。

所以，我认为我的两个选择是:

1. 告诉Vite把一个特定的文件，未经修改，放在公共文件夹。

2. 在npm install运行时运行post install脚本。(无论用户是在Windows、mac还是linux上，这都必须工作。)

3. 还有什么魔法吗?

我不知道如何实现这些，所以一个指向一些文档的指针或一个好的术语来搜索也会很感激。

或者这只是徒劳的，我应该告诉用户手动将文件复制到他们的公共文件夹?

Answer 1

如果你使用的是Vite，你可以创建一个带有Vite插件的npm库。Vite插件的文档在这里，Vite插件API的来源也在这里。添加到Vite输出和开发服务器的插件代码为

import { writeFile } from "fs";
import { resolve } from "path";
let url = "service-worker.js"
let fileContent = "file contents"
let outPath;
const myPlugin = () => ({
name: "add-service-worker",
configResolved(resolvedConfig) {
outPath = resolve(resolvedConfig.root, resolvedConfig.build.outDir, url);
},
configureServer(server) {
server.middlewares.use(`/${url}`, (req, res, next) => {
res.writeHead(200, { "Content-Type": "text/javascript" });
res.write(fileContent);
res.end();
});
},
closeBundle() {
writeFile(outPath, fileContent, { flag: "w" }, (error) => {
if (error) {
throw error;
}
console.log(`Generated file to ${outPath}`);
});
},
});
export default myPlugin;

同样也可以应用于rollup或webpack插件。然而，真正最简单的方法是将其作为一个库，并使用

导入它。

import service-worker from "service-worker"