javascript - Write to disk option for Vite - Stack Overflow

admin管理员组

文章数量:1331091

recently I have started working with vite on a couple of small projects and found it very interesting, however got a blocker once tried to work on ExpressJS + Svelte coupled project.

I usually use Express as BFF (Backend For Frontend) when it es to working on rather more serious projects since it allows me to go for HTTPOnly cookies as well as proxy gateway for the frontend. However for development (specially when it es to oauth2) it is hard to develop the spa separated form the server so what I usually do with webpack is activating the WriteToDisk option for devserver which then allows me to have my development build in the dist folder.

Example with webpack will be something like the webpack config below for the frontend:

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

and then on the server basically rendering the dist as static folder:

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

My problem

I can not find in vite's documentation any APIs to do something like this, does anyone have any experience with such cases?

if it is possible with the help of plugins, can you please provide references to the plugin or dev logs of it?

Many Thanks :)

recently I have started working with vite on a couple of small projects and found it very interesting, however got a blocker once tried to work on ExpressJS + Svelte coupled project.

I usually use Express as BFF (Backend For Frontend) when it es to working on rather more serious projects since it allows me to go for HTTPOnly cookies as well as proxy gateway for the frontend. However for development (specially when it es to oauth2) it is hard to develop the spa separated form the server so what I usually do with webpack is activating the WriteToDisk option for devserver which then allows me to have my development build in the dist folder.

Example with webpack will be something like the webpack config below for the frontend:

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

and then on the server basically rendering the dist as static folder:

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

My problem

I can not find in vite's documentation any APIs to do something like this, does anyone have any experience with such cases?

if it is possible with the help of plugins, can you please provide references to the plugin or dev logs of it?

Many Thanks :)

• javascript
• webpack
• bundle
• single-page-application
• vite

Share Improve this question Follow asked Feb 8, 2022 at 20:50 Mehdi AmeneinMehdi Amenein 1,2071717 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Here is an example plugin I was able to hack together. You might need to modify it to suit your needs:

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

const writeToDisk: () => Plugin = () => ({
    name: 'write-to-disk',
    apply: 'serve',
    configResolved: async config => {
        config.logger.info('Writing contents of public folder to disk', {timestamp: true});
        await fs.cp(config.publicDir, config.build.outDir, {recursive: true});
    },
    handleHotUpdate: async ({file, server: {config, ws}, read}) => {
        if (path.dirname(file).startsWith(config.publicDir)) {
            const destPath = path.join(config.build.outDir, path.relative(config.publicDir, file));
            config.logger.info(`Writing contents of ${file} to disk`, {timestamp: true});
            await fs.access(path.dirname(destPath)).catch(() => fs.mkdir(path.dirname(destPath), {recursive: true}));
            await fs.writeFile(destPath, await read());
        }
    },
});

In short, it copies the content of the publicDir (public) to the outDir (dist).

Only thing missing is the ability to watch the public folder and copy whatever changed to the dist folder again. It will also re-write the file if any of the files within the public folder changes.

Note: The use of fs.cp relies on an experimental API from node 16.

Feel free to modify as you please. Would be nice to be able to specify file globs to include/exclude, etc.

There is a very simple way to get this behavior. Just set up a watch script to do a regular Vite build using something like npm-watch package.

npm install npm-watch

"watch": {
  "run_mybuild": {
    "patterns": [
      "src"
    ],
    extensions: "js,jsx"
  }
},
"scripts": {
  "dev": "npm-watch run_mybuild",
  "run_mybuild": "vite build"
}

npm run dev

You now have a Vite build that generates files on a watch. No it's not incremental. There is a rollup incremental build (Vite uses rollup to build when it generates files) but even though I got it "working" it just generates everything still.

I think if you just use a different vite config and put vite in watch mode by passing:

build: {
  watch: true,
  sourcemap: true
}

in your vite.config.js that probably works too. If you need to copy assets for your build they will get removed though.

本文标签： javascriptWrite to disk option for ViteStack Overflow