Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/recallwei/unplugin-auto-import-antd
🔧 unplugin-auto-import-antd is a resolver for unplugin-auto-import that enables on-demand importing of antd components.
https://github.com/recallwei/unplugin-auto-import-antd
antd auto-import-antd unplugin-auto-import
Last synced: about 2 months ago
JSON representation
🔧 unplugin-auto-import-antd is a resolver for unplugin-auto-import that enables on-demand importing of antd components.
- Host: GitHub
- URL: https://github.com/recallwei/unplugin-auto-import-antd
- Owner: recallwei
- License: mit
- Created: 2023-11-14T17:27:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T10:16:49.000Z (8 months ago)
- Last Synced: 2024-06-22T06:28:37.703Z (6 months ago)
- Topics: antd, auto-import-antd, unplugin-auto-import
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-auto-import-antd
- Size: 124 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# unplugin-auto-import-antd
English / [简体ä¸æ–‡](./README.zh-CN.md)
`unplugin-auto-import-antd` is a resolver for [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) that enables on-demand importing of antd components.
> Only support antd v5+.
## Features
- Support `Vite`, `Webpack` and more
- Automatically imports components from `antd`
- Support custom prefix for components
- Support package alias import## Installation
### npm
```bash
npm i -D unplugin-auto-import-antd unplugin-auto-import
```### yarn
```bash
yarn add -D unplugin-auto-import-antd unplugin-auto-import
```### pnpm
```bash
pnpm add -D unplugin-auto-import-antd unplugin-auto-import
```### bun
```bash
bun add -D unplugin-auto-import-antd unplugin-auto-import
```## Usage
### Vite
```ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-auto-import-antd'export default defineConfig({
plugins: [
AutoImport({
resolvers: [AntdResolver()]
})
]
})
```### Webpack
```js
// webpack.config.js
const AntdResolver = require('unplugin-auto-import-antd')module.exports = {
/* ... */
plugins: [
require('unplugin-auto-import/webpack')({
resolvers: [AntdResolver()]
})
]
}
```### Using custom prefix
```ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-auto-import-antd'export default defineConfig({
plugins: [
AutoImport({
resolvers: [
AntdResolver({
prefix: 'A'
})
]
})
]
})
```If specify a custom prefix,such as `A`, the way of writing components should changed from original `Button` to `AButton`.
Equivalent to `import { Button as AButton } from 'antd'`.
### Using package alias
```ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-auto-import-antd'export default defineConfig({
plugins: [
AutoImport({
resolvers: [
AntdResolver({
packageName: 'antd-v5'
})
]
})
]
})
```Install `antd` via an alias, such as `antd-v5`.
Equivalent to `import { Button } from 'antd-v5'`.
## License
[MIT](/LICENSE) License © 2024 [Bruce Song](https://github.com/recallwei)