README_CN.md

vite-plugin-runtime-cdn

一个支持运行时 CDN 配置的 Vite 插件。

安装

请确认你的 Vite 版本在 2.9.0 以上。

# pnpm
pnpm add -D vite-plugin-runtime-cdn
# yarn
yarn add -D vite-plugin-runtime-cdn
# npm
npm i -D vite-plugin-runtime-cdn

使用

// vite.config.js
import { defineConfig } from 'vite'

// 1. 导入插件
import { RuntimeCdnPlugin } from 'vite-plugin-runtime-cdn'

export default defineConfig({
  plugins: [
    // 2. 添加至插件列表
    RuntimeCdnPlugin(),
  ],
})

该插件运行时的 cdn 域名是通过 window.cdn_domain 取到的，默认配置为 ${window.cdn_domain || ''}，所以你需要保证 window.cdn_domain 已经在 html 或者其它入口文件已经注入，如果你想修改该配置，你可以传入 cdnDomainPlaceholder 参数，但你需要使用 ${} 进行包裹，如 ${window.myCustomCDNDomain || ''}。

// vite.config.js
import { defineConfig } from 'vite'

// 1. 导入插件
import { RuntimeCdnPlugin } from 'vite-plugin-runtime-cdn'

export default defineConfig({
  plugins: [
    // 2. 添加至插件列表
    RuntimeCdnPlugin({
      cdnDomainPlaceholder: `${window.myCustomCDNDomain || ''}`,
    }),
  ],
})

该插件默认不会转换 css 文件内部的静态资源（如图片等）引用，如果你想同时将 css 内部的静态资源也转化为运行时 cdn 配置，则需要将 css 注入到各自的 js 模块内部，再变成运行时 cdn 配置，这里将 css 注入至 js 模块参考的是 vite-plugin-inject-css-to-js 插件。

你可以通过配置 transformCssSourceURL 参数将 css 内部引用的静态资源转换为运行时 cdn 配置，但请注意，html 入口引用的 css 文件是不允许注入到对应的 js 模块的，具体可以参考 Why can't I build all css files into js?。

// vite.config.js
import { defineConfig } from 'vite'

// 1. 导入插件
import { RuntimeCdnPlugin } from 'vite-plugin-runtime-cdn'

export default defineConfig({
  plugins: [
    // 2. 添加至插件列表
    RuntimeCdnPlugin({
      transformCssSourceURL: true,
    }),
  ],
})

License

MIT License © Levix