vite-plugin-resolve
Custom resolve module content
English | įŽäŊä¸æ
Install
npm i vite-plugin-resolve -DUsage
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'You can easy to use lib2esm() to customize some things
import resolve, { lib2esm } from 'vite-plugin-resolve'
export default {
plugins: [
resolve({
// Let's use lodash as an example
lodash: lib2esm(
// lodash iife name
'_',
// export memebers
[
'chunk',
'curry',
'debounce',
'throttle',
],
),
}),
]
}
// Use in your app
import _, { chunk, curry, debounce, throttle } from 'lodash'Use in Electron
Builtin modules
This like Vite external plugin
import resolve from 'vite-plugin-resolve'
import {
antd_vue,
antd,
element_plus,
element_ui,
pinia,
react_dom,
react_router_dom,
react_router,
react,
redux,
vue_composition_api,
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
resolve(entries)
type 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
lib2esm(name[,members[,options]])
export interface Lib2esmOptions {
/**
* Generate code snippet format
*
* đ° e.g.
* ```js
* const _M_ = require('lib') // cjs
* const _M_ = window['lib'] // iife
* ```
*
* @default "iife"
*/
format?: "cjs" | "iife",
}
export interface Lib2esm {
(name: string, options?: Lib2esmOptions): string
(name: string, members: string[], options?: Lib2esmOptions): string
}
export declare const lib2esm: Lib2esmWhat's different from the official Demo?
There are two main differences
- Bypass the builtin
vite:resolveplugin - Reasonably avoid Pre-Bundling
