vite-plugin-resolve

vite-plugin-resolve

Custom resolve module content

English | 简体中文

• It can be compatible with Browser, Node.js and Electron, without environment
• You can think of it as an enhanced Vite external plugin
• You can think of it as manual version Pre-Bundling

Install

npm i -D vite-plugin-resolve

Usage

import { defineConfig } from 'vite'
import viteResolve from 'vite-plugin-resolve'

export default defineConfig({
  plugins: [
    viteResolve({
      // resolve external module, this like Vite external plugin
      vue: `const vue = window.Vue; export { vue as default }`,

      // nested moduleId and return Promis<string>
      '@scope/name': async () => await require('fs').promises.readFile('path', 'utf-8'),

      // electron
      electron: `const { ipcRenderer } = require('electron'); export { ipcRenderer };`,
    })
  ]
})

Type define

export type viteResolve = (
  resolves: [moduleId: string]: string | ((args: { dir: string }) => string | Promise<string | void> | void) | void,
  options?: {
    /**
     * @default true
     * Whether to insert the resolve module into "optimizeDeps.exclude"
     */
    optimizeDepsExclude: boolean
  }
) => import('vite').VitePlugin

How to work

Let's use Vue as an example

viteResolve({
  vue: `const vue = window.Vue; export { vue as default }`,
})

1. Create node_modules/.vite-plugin-resolve/vue.js and contains the following code

const vue = window.Vue; export { vue as default }

1. Create a vue alias item and add it to resolve.alias

{
  resolve: {
    alias: [
      {
        find: 'vue',
        replacement: 'User/work-directory/node_modules/.vite-plugin-resolve/vue.js',
      },
    ],
  },
}

1. Add vue to the optimizeDeps.exclude by default. You can disable it through options.optimizeDepsExclude

export default {
  optimizeDeps: {
    exclude: ['vue'],
  },
}