Vite 的写入磁盘选项答案

【问题标题】：Write to disk option for ViteVite 的写入磁盘选项
【发布时间】：2022-06-21 12:27:45
【问题描述】：

最近我开始在几个小项目上使用 vite，发现它非常有趣，但是有一次尝试在 ExpressJS + Svelte 耦合项目上工作时遇到了障碍。

在处理更严肃的项目时，我通常使用 Express 作为 BFF（前端后端），因为它允许我使用 HTTPOnly cookie 以及前端的代理网关。但是对于开发（特别是涉及 oauth2），很难开发与服务器分离的 spa，所以我通常使用 webpack 做的是激活 devserver 的 WriteToDisk 选项，然后允许我在 dist 文件夹中构建我的开发。

webpack 的示例类似于下面的前端 webpack 配置：


    module.exports = {
        devServer: {
            devMiddleware: {
                writeToDisk: true,
            },
        },
        //...
    }

然后在服务器上基本上将 dist 渲染为静态文件夹：


    app.get(
      "*",
      (req, res, next) => {
        if (req.session.isAuth) return next();
        else return res.redirect(staticURL);
      },
      (req, res) => {
        return res.sendFile(staticProxyPage());
      }
    );

我的问题

我在 vite 的文档中找不到任何 API 来做这样的事情，有没有人有这种情况的经验？

如果可以借助插件，能否提供插件参考或开发日志？

非常感谢:)

【问题讨论】：

标签： javascript webpack bundle single-page-application vite

【解决方案1】：

这是一个我能够一起破解的示例插件：

// https://vitejs.dev/guide/api-plugin.html#universal-hooks=
import {type Plugin} from 'vite';
import fs from 'fs';

const writeToDisk: () => Plugin = () => ({
    name: 'write-to-disk',
    apply: 'serve',
    configResolved: config => {
        config.logger.info('Writing contents of public folder to disk', {timestamp: true});
        fs.cpSync(config.publicDir, config.build.outDir, {recursive: true});
    }
});

简而言之，它将publicDir（public）的内容复制到outDir（dist）。

唯一缺少的是能够查看公用文件夹并将更改的内容再次复制到 dist 文件夹。

注意：使用fs.cpSync 依赖于自节点 16 以来的实验性 API。

【讨论】：