viteExternalsPlugin 插件管理外部依赖

最新推荐文章于 2024-08-22 08:48:16 发布

茶颜悅色

最新推荐文章于 2024-08-22 08:48:16 发布

阅读量591

点赞数 4

文章标签： javascript react.js vue.js 前端框架前端 html5

本文链接：https://blog.csdn.net/m0_69838795/article/details/140387783

版权

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修改成什么名字在这边改
  },
});

使用：

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