vite-plugin-resolve

vite-plugin-resolve

Custom resolve module content

English | 简体中文

🤔 You can think of this as the implementation of the official tutorial 👉 Virtual Modules Convention
✅ Browser, Node.js, Electron

Install

npm i vite-plugin-resolve -D

Usage

You can load any code snippet you want

import resolve from 'vite-plugin-resolve'

export default {
  plugins: [
    resolve({
      vue: `const vue = window.Vue; export { vue as default }`,
    }),
  ]
}

In you App

import Vue from 'vue'

This like Vite external plugin
You you can see more about external 👉 vite-plugin-fast-external

Load a file

Support nested module id, support return Promise

import fs from 'fs'

resolve({
  'path/filename': () => fs.promise.readFile('path', 'utf-8'),
})

Electron

Resolve Electron Renderer-process

resolve({
  electron: `
    const electron = require("electron");
    export { electron as default }
    const export shell = electron.shell;
    const export ipcRenderer = electron.ipcRenderer;
    // ...others
  `,
})

In you App(Renderer-process)

import { shell, ipcRenderer } from 'electron'

API

resolve(entries)

entries

{
  [moduleId: string]:
    | ReturnType<Plugin['load']>
    | ((...args: Parameters<Plugin['load']>) => ReturnType<Plugin['load']>)
}

You can see the return value type definition here rollup/types.d.ts#L272

What's different from the official Demo?

There are two main differences

1. Bypass the builtin vite:resolve plugin
2. Reasonably avoid Pre-Bundling