Vite Plugin CDN Import 使用教程

2024-08-15 05:37:36作者：殷蕙予

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',
        },
      ],
    }),
  ],
});