unplugin-auto-import 使用教程

unplugin-auto-import 使用教程

unplugin-auto-import项目地址:https://gitcode.com/gh_mirrors/unp/unplugin-auto-import

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

unplugin-auto-import 是一个用于自动导入 API 的插件，支持 Vite、Webpack、Rollup 和 esbuild。以下是该项目的目录结构及各部分介绍：

unplugin-auto-import/
├── dist/                  # 编译后的文件
├── src/                   # 源代码目录
│   ├── index.ts           # 主入口文件
│   ├── core/              # 核心功能模块
│   ├── resolvers/         # 解析器模块
│   ├── types/             # 类型定义
│   └── utils/             # 工具函数
├── examples/              # 示例项目
├── tests/                 # 测试代码
├── package.json           # 项目配置文件
├── README.md              # 项目说明文档
└── tsconfig.json          # TypeScript 配置文件

目录结构说明

• dist/: 编译后的文件，用于生产环境。
• src/: 源代码目录，包含项目的核心功能。
  • index.ts: 主入口文件，负责初始化和导出插件。
  • core/: 核心功能模块，处理自动导入的逻辑。
  • resolvers/: 解析器模块，定义如何解析导入的 API。
  • types/: 类型定义，提供 TypeScript 类型支持。
  • utils/: 工具函数，包含一些通用的辅助函数。
• examples/: 示例项目，展示如何使用该插件。
• tests/: 测试代码，确保插件功能的正确性。
• package.json: 项目配置文件，包含依赖、脚本等信息。
• README.md: 项目说明文档，提供使用指南和示例。
• tsconfig.json: TypeScript 配置文件，定义 TypeScript 编译选项。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个插件的入口点。以下是该文件的主要内容：

import { createUnplugin } from 'unplugin'
import { Options } from './types'
import { createContext } from './core'

export default createUnplugin<Options>((options) => {
  const ctx = createContext(options)

  return {
    name: 'unplugin-auto-import',
    enforce: 'pre',
    transformInclude(id) {
      return ctx.filter(id)
    },
    transform(code, id) {
      return ctx.transform(code, id)
    },
    resolveId(id) {
      return ctx.resolveId(id)
    },
  }
})

启动文件说明

• createUnplugin: 创建插件的函数，接受一个配置对象。
• Options: 插件的配置选项类型定义。
• createContext: 创建上下文对象的函数，处理插件的核心逻辑。
• name: 插件的名称。
• enforce: 插件的执行顺序，pre 表示在其他插件之前执行。
• transformInclude: 决定哪些文件需要被转换。
• transform: 实际的代码转换逻辑。
• resolveId: 解析模块 ID 的逻辑。

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的依赖、脚本和其他配置信息。以下是该文件的主要内容：

{
  "name": "unplugin-auto-import",
  "version": "0.10.2",
  "description": "Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild.",
  "keywords": [
    "unplugin",
    "vite",
    "webpack",
    "rollup",
    "esbuild",
    "auto-import",
    "on-demand"
  ],
  "homepage": "https://github.com/antfu/unplugin-auto-import#readme",
  "bugs": {
    "url": "https://github.com/antfu/unplugin-auto-import/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/antfu/unplugin-auto-import.git"

unplugin-auto-import项目地址:https://gitcode.com/gh_mirrors/unp/unplugin-auto-import