Dependency Injection with Vite and TypeScript

Writing a cross-platform web app means you need to bundle different code with each platform. I discussed the approach with Webpack and NormalModuleReplacementPlugin in an earlier post.

In Vite you can do this in vite.config.ts:

import alias from '@rollup/plugin-alias';

...

plugins: [
    {
      enforce: 'pre',
      ...alias({
        entries: [
          {
            find: /\/MainRepository$/,
            replacement: '/TauriRepository',
          },
        ],
      }),
    },
],

This would find any module called MainRepository and swap it out for the TauriRepository module in the same folder.

enforce: 'pre' is important here, otherwise Vite has already run its pipeline and it's too late. If you're just using Rollup without Vite then you should be able to use the alias entry directly.