viteExternalsPlugin 是一个 Vite 插件，用于将指定的模块或库配置为外部依赖

安装：

npm i vite-plugin-externals

1.实战用途

    比如从项目 index.html 中引入一些SDK文件，我这个是引入的CHATUI 

vite.config.js 配置：

       

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteExternalsPlugin } from "vite-plugin-externals";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteExternalsPlugin({
      react: "React",
      "react-dom": "ReactDOM",
      "react-dom/client": "ReactDOM",
      ChatUI: "ChatSDK",
      "chatui/core": "ChatSDK",
      "@ali/chatui-sdk": "ChatSDK",
    }),
    {
      presets: [
        [
          "@babel/preset-env",
          {
            targets: {
              chrome: "49",
              ios: "10",
            },
          },
        ],
      ],
    },
  ],
  resolve: {
    alias: {
      // 使用 @ 替换src目录
      "@": path.resolve(__dirname, "./src"),
    },
  },
  //vite.config.js
  build: {
    outDir: "build", //想要把dist修改成什么名字在这边改
  },
});

使用：

直接想引入插件一样引入即可