cdnImport(options)

向 HTML 注入 CDN CSS/JavaScript，并在转换阶段把配置模块的 ESM 引用替换为 globalThis 访问。

cdnImport({
	urlTemplate: "https://cdn.jsdelivr.net/npm/{name}@{version}/{path}",
	modules: {
		name: "react-dom",
		global: "ReactDOM",
		version: "19.0.0",
		js: "umd/react-dom.production.min.js",
		aliases: ["react-dom/client"],
	},
	crossorigin: "anonymous",
	dev: false,
});

CdnImportPluginOptions CDN配置

选项	默认值	说明
modules	必填	单个模块、数组或按 Vite 环境返回模块的函数
urlTemplate	jsDelivr	{name}、{version}、{path} 模板
dev	false	开发服务器也使用 CDN
resolveVersion	true	从 node_modules/<name>/package.json 读取缺失版本
ssr	false	SSR 也使用浏览器全局变量；通常不应开启
crossorigin	"anonymous"	标签属性；false 不输出
injectTo	"head-prepend"	Vite HTML 注入位置
generateScriptTag / generateStyleTag	-	自定义单个资源标签描述符

CdnModule CDN模块

字段	说明
name	npm/import 模块名
global	浏览器全局变量，支持 ReactDOM.client
version	固定版本；省略时默认自动读取
js	JS 相对路径、完整 URL 或数组
css	CSS 相对路径、完整 URL 或数组
aliases	映射到相同全局变量的额外模块名
urlTemplate	当前模块专用 URL 模板
scriptAttributes / styleAttributes	合并到标签的额外属性

支持默认导入、命名导入、命名重导出、export * as name 和静态字符串动态导入。普通 export * from 会报错，因为无法安全地把动态全局对象枚举成静态 ESM 导出。

启用 dev: true 后，开发服务器会继续注入 CDN 标签并转换 JavaScript 模块引用；HTML 内联样式及其他 CSS 请求不会参与 JavaScript AST 转换。

cdnImport CDN引入

将指定依赖替换为 CDN 全局变量，并按依赖顺序向 HTML 注入 CSS 与 JavaScript。

签名

export function cdnImport(options: CdnImportPluginOptions): Plugin;

示例

import { cdnImport } from "fast-vite-plugins";

const plugin = cdnImport({ modules: { name: "vue", global: "Vue", version: "3.5.11", js: "dist/vue.global.prod.js" } });

export default { plugins: [plugin] };

输入

输入值	输入值类型	必填/默认值	输入值说明
options	CdnImportPluginOptions	是	CDN 模块、版本解析、开发模式、SSR 与标签配置。

返回

返回值	返回值类型	返回值说明
plugin	Plugin	可直接加入 Vite plugins 的 CDN 导入插件。