Vite Plugin CDN Import 使用教程

1. 项目的目录结构及介绍

Vite Plugin CDN Import 项目的目录结构如下：

vite-plugin-cdn-import/
├── docs/
├── examples/
├── src/
├── __tests__/
├── .gitignore
├── .yarnrc.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── tsconfig.json
├── tsup.config.ts
├── yarn.lock

目录介绍：

• docs/: 存放项目的文档文件。
• examples/: 存放示例代码。
• src/: 存放源代码文件。
• __tests__/: 存放测试文件。
• .gitignore: Git 忽略文件配置。
• .yarnrc.yml: Yarn 配置文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• eslint.config.js: ESLint 配置文件。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• tsup.config.ts: Tsup 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.ts，该文件是插件的入口点，负责导出插件的主要功能。

// src/index.ts
import { Plugin } from 'vite';
import { createFilter } from '@rollup/pluginutils';
import { getRemoteModuleUrl } from './utils';

export default function cdnImport(options: {
  modules: Array<{
    name: string;
    var: string;
    path: string;
    version?: string;
    css?: string;
  }>;
}): Plugin {
  const filter = createFilter(options.include, options.exclude);
  return {
    name: 'vite-plugin-cdn-import',
    transform(code, id) {
      if (!filter(id)) return null;
      // 处理代码中的模块导入
    },
  };
}

3. 项目的配置文件介绍

项目的配置文件主要是 vite.config.ts，该文件用于配置 Vite 项目。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { autoComplete, importToCDN } from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      prodUrl: 'https://unpkg.com/[name]@[version]/[path]',
      modules: [
        autoComplete('vue'),
        autoComplete('axios'),
        {
          name: 'element-plus',
          var: 'ElementPlus',
          version: '2.2.17',
          path: 'dist/index.full.js',
          css: 'dist/index.css',
        },
        {
          name: 'vue-demi',
          var: 'VueDemi',
          version: '0.13.11',
          path: 'lib/index.iife.js',
        },
        {
          name: '@element-plus/icons-vue',
          var: 'ElementPlusIconsVue',
          version: '2.0.9',
          path: 'dist/index.iife.min.js',
        },
        {
          name: 'bootstrap',
          var: 'bootStrap',
          version: '5.1.3',
          path: 'dist/js/bootstrap.js',
          css: 'dist/css/bootstrap.min.css',
        },
      ],
    }),
  ],
});

配置文件介绍：

• plugins: 配置 Vite 插件，包括 vue 和 vite-plugin-cdn-import。
• importToCDN: 配置 CDN 引入的模块，包括模块名称、变量名、版本号、路径和 CSS 文件路径。

以上是 Vite Plugin CDN Import 项目的目录