推荐一个让我开发效率翻倍的导入神器：unplugin-import-adapter 🚀
最近开发新项目时，被一个工具狠狠圈粉了——没错，就是我之前开发的 unplugin-import-adapter！当初写的时候没觉得多惊艳，现在实战用起来是真的香，必须安利给各位前端同学～
开发时的痛点 🤯
你是不是也遇到过这些场景：
- 项目里的组件/工具函数越来越多，手动维护
unplugin-auto-import的导入列表快疯了 - 新增了导出却忘了加配置，运行时才发现报错，浪费时间排查
- 第三方库的导出命名想统一加前缀/别名，手动改到吐
以前我也是这么过来的，直到用了这个工具才发现：原来自动导入可以这么丝滑！
它到底能干嘛？核心优势看这里 🌟
简单说，这是一个专为 unplugin-auto-import 设计的 TypeScript 导出自动提取工具，核心能力直接戳中痛点：
✅ 自动发现导出：不用手动写导入配置，自动扫描 TS 文件的命名导出
✅ 实时同步更新：新增导出立刻生效，改完代码不用重启 devServer
✅ 灵活适配场景：支持包名/路径别名、自定义转换规则（比如给 antd 组件加统一前缀）
✅ 全生态兼容：Vite/Webpack/Rollup 都能用，TS 4.0+ 完美支持
3个实战场景，看完就会用 🛠️
直接上代码，这几种场景应该能覆盖大部分需求：
1. 本地组件库自动导入
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import { autoImport } from 'unplugin-import-adapter'
export default defineConfig({
plugins: [
AutoImport({
imports: [
autoImport({
pkgName: 'components', // 包名
path: path.resolve(__dirname, './components/src/index.ts') // 本地路径
})
]
})
]
})
2. 第三方库别名转换
比如给 radash 的函数加下划线包裹：
autoImport({
pkgName: 'radash',
alias: name => `_${name}_` // 转换后：_chunk_、_pipe_...
})
3. UI框架统一前缀
给 antd 组件加 Antd 前缀，避免命名冲突：
autoImport({
pkgName: 'antd',
alias: name => `Antd${name}` // 转换后：AntdButton、AntdInput...
})
快速上手指南 🚀
-
安装依赖（支持 npm/yarn/pnpm）：
pnpm add -D unplugin-import-adapter unplugin-auto-import # 注意：如果遇到 ts-morph 相关错误，单独安装一下(最新版本不需要了) pnpm add -D ts-morph -
在打包配置（Vite/Webpack 等）中引入，像上面的示例那样配置即可～
最后说句掏心窝的话 💡
这个工具最初只是为了解决我自己项目里的重复劳动，没想到现在成了每次新建项目必装的依赖。特别是团队协作时，能少很多“忘记加导入配置”的扯皮，省下来的时间摸鱼不香吗？
如果对你有帮助，欢迎去 GitHub 给个星 🌟，有任何问题或建议也可以提 Issue，我会尽快回复～
👉 项目地址：github.com/JsonLee1213…
