README.zh-CN.md

vite-plugin-resolve

自定义加载模块内容

English | 简体中文

• 🤔 你可以认为它是官方教程的一个实现 👉 Virtual Modules Convention
• 🌱 所见即所得
• 📦 开箱即用 _{^{(内置 Vue, React, Antd, Element 等等)}}
• 🚀 Browser, Node.js, Electron

安装

npm i vite-plugin-resolve -D

使用

你可以加载任何你想要的代码段 （ESM 格式）

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,
        }
      `,
    }),
  ]
}

// 使用
import Vue, { version } from 'vue'
import { ipcRenderer, shell } from 'electron'

// 确保你的 index.html 已经包含了 CDN 文件.
// 🌰
// <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>

配合 lib-esm 使用

npm i lib-esm

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

export default {
  plugins: [
    resolve({
      // 用 lodash 举个 🌰
      lodash: () => {
        const snippets = libEsm({
          // lodash 全局名称
          window: '_',
          // export memebers
          exports: [
            'chunk',
            'curry',
            'debounce',
            'throttle',
          ],
        })
        return `${snippets.window}\n${snippets.exports}`
      },
    }),
  ],
}

// 使用
import _, { chunk, curry, debounce, throttle } from 'lodash'

在 Electron 中使用 👉 electron-vite-vue

内置模块

这个场景就是 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,
    }),
  ]
}

// 使用
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[];

你可以在此处看到返回值类型定义 rollup/types.d.ts#L272

这与官方的 Demo 有何异同？

主要有两点不一样

1. 绕过内置的 vite:resolve 插件
2. 合理的避开 Pre-Bundling