unjs系列——自动引入api那些事

前言

相信很多vue开发的同学都应该听说过antfu这号人物，也使用过他开发的系列工具，比如我个人常用的vueuse vitesse unocss等，对于一些懒得引入api的开发者来说(是的，就是我)，unplugin-vue-components unplugin-auto-import更是偷懒必备神器，下面我就从使用和原理两方面来浅析unplugin-auto-import插件。

介绍

unplugin-auto-import插件，为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API，支持TypeScript

使用方法

这章节我们先来简单使用下unplugin-auto-import，对于已经使用过该插件的同学可以先跳过这章节看后面的原理。

准备工程

我们先创建一个vite+vue+typescript工程

pnpm create vite 

D:\project>pnpm create vite

Progress: resolved 1, reused 1, downloaded 0, added 1, done
+ √ Project name: ... unimport-fun
+ √ Select a framework: » Vue
+ √ Select a variant: » TypeScript

Scaffolding project in D:\project\unimport-fun...

Done. Now run:cd unimport-funpnpm installpnpm run dev


D:\project> 

pnpm install后运行工程

下面有个count按钮，对应的是src/components/HelloWorld.vue，我们查看这个组件，以下是精简后的主要代码：

<script setup lang="ts"> import { ref } from 'vue'

const count = ref(0) </script>

<template><div class="card"><button type="button" @click="count++">count is {
  { count }}</button></div>
</template> 

就是一个ref响应式数据count，点击按钮+1，这对于学过vue3的应该都不难，觉得理解上有困难的同学可以先去学习下vue3的基础。

引入插件

执行命令安装插件

pnpm add unplugin-auto-import 

在vite.config.ts配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),
+ AutoImport()]
}) 

unplugin-auto-import插件内置了一些预设，预设的作用是不用我们自己去配置，就能使用主流框架的api，比如我希望自动导入vue3的api，是这样使用的:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({
+ imports: ['vue']})]
}) 

这时候运行工程，会发现工程中多了个auto-imports.d.ts文件，内容是：

// Generated by 'unplugin-auto-import'
export {}
declare global {const EffectScope: typeof import('vue')['EffectScope']const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const effectScope: typeof import('vue')['effectScope']const getCurrentInstance: typeof import('vue')['getCurrentInstance']const getCurrentScope: typeof import('vue')['getCurrentScope']const h: typeof import('vue')['h']const inject: typeof import('vue')['inject']const isProxy: typeof import('vue')['isProxy']const isReactive: typeof import('vue')['isReactive']const isReadonly: typeof import('vue')['isReadonly']const isRef: typeof import('vue')['isRef']const markRaw: typeof import('vue')['markRaw']const nextTick: typeof import('vue')['nextTick']const onActivated: typeof import('vue')['onActivated']const onBeforeMount: typeof import('vue')['onBeforeMount']const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']const onDeactivated: typeof import('vue')['onDeactivated']const onErrorCaptured: typeof import('vue')['onErrorCaptured']con