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
• 🌱 What you see is what you get
• 📦 Out of the box _{^{(builtin Vue, React, Antd, Element and others)}}
• 🚀 Browser, Node.js, Electron

Install

npm i vite-plugin-resolve -D

Usage

You can load any code snippets you want (ESM format)

import resolve from 'vite-plugin-resolve'

export default {
  plugins: [
    resolve({
      // Browser
      vue: `
        const vue = window.Vue;
        const version = vue.version;
        export {
          vue as default,
          version,
        }
      `,
      // Node.js, Electron
      electron: `
        const { ipcRenderer, shell } = require('electron');
        export {
          ipcRenderer,
          shell,
        }
      `,
    }),
  ]
}

// Use in your app
import Vue, { version } from 'vue'
import { ipcRenderer, shell } from 'electron'

// Make sure that index.html has introduced the CDN file.
// e.g.
// <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>

Use with lib-esm

npm i lib-esm

import resolve from 'vite-plugin-resolve'
import libEsm from 'lib-esm'

export default {
  plugins: [
    resolve({
      // Let's use lodash as an example
      lodash: () => {
        const snippets = libEsm({
          // lodash iife name
          window: '_',
          // export memebers
          exports: [
            'chunk',
            'curry',
            'debounce',
            'throttle',
          ],
        })
        return `${snippets.window}\n${snippets.exports}`
      },
    }),
  ],
}

// Use in your app
import _, { chunk, curry, debounce, throttle } from 'lodash'

Use in Electron 👉 electron-vite-vue

Builtin modules

This like Vite external plugin

import resolve from 'vite-plugin-resolve'
import {
  ant_design_vue,
  antd,
  axios,
  element_plus,
  element_ui,
  pinia,
  react_dom,
  react_router_dom,
  react_router,
  react,
  redux,
  vue_composition_api,
  vue_demi,
  vue_router,
  vue,
  vuex,
} from 'vite-plugin-resolve/presets'

export default {
  plugins: [
    resolve({
      // e.g.
      // external-lib: lib-name.version
      vue: vue.v3,
      react: react.v18,
    }),
  ]
}

// Use in your app
import Vue, { ref, reactive, computed, watch } from 'vue'
import React, { useState, useEffect } from 'react'

API _^(Define)

resolve(entries)

function resolve(entries: {
  [moduleId: string]:
  | import('rollup').LoadResult
  | import('vite').Plugin['load'];
}): import('vite').Plugin[];

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

• Bypass the builtin vite:resolve plugin
• Reasonably avoid Pre-Bundling