ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-16 08:00:34 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: support unplugin-auto-import plugin (#12679)

Browse Source
This commit is contained in:
dragonzhang
2024-03-17 09:41:00 +08:00
committed by GitHub
parent 942b190e07
commit 66d8a1800c
5 changed files with 165 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/vant-auto-import-resolver/README.md
View File

@@ -14,16 +14,16 @@ English | [简体中文](./README.zh-CN.md)
```shell
# via npm
npm i @vant/auto-import-resolver unplugin-vue-components -D
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via yarn
yarn add @vant/auto-import-resolver unplugin-vue-components -D
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via pnpm
pnpm add @vant/auto-import-resolver unplugin-vue-components -D
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via Bun
bun add @vant/auto-import-resolver unplugin-vue-components -D
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
```
## Usage
@@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
```ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -48,11 +52,15 @@ export default defineConfig({
```ts
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -64,11 +72,15 @@ export default {
```ts
// webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -80,11 +92,15 @@ module.exports = {
```ts
// rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -96,12 +112,16 @@ module.exports = {
```ts
// vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -115,11 +135,15 @@ module.exports = {
```ts
// esbuild.config.js
import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver';
build({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),

32
packages/vant-auto-import-resolver/README.zh-CN.md
View File

@@ -14,16 +14,16 @@
```shell
# via npm
npm i @vant/auto-import-resolver unplugin-vue-components -D
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via yarn
yarn add @vant/auto-import-resolver unplugin-vue-components -D
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via pnpm
pnpm add @vant/auto-import-resolver unplugin-vue-components -D
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# via Bun
bun add @vant/auto-import-resolver unplugin-vue-components -D
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
```
## 使用
@@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
```ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -48,11 +52,15 @@ export default defineConfig({
```ts
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -64,11 +72,15 @@ export default {
```ts
// webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -80,11 +92,15 @@ module.exports = {
```ts
// rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -96,12 +112,16 @@ module.exports = {
```ts
// vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';
module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
@@ -115,11 +135,15 @@ module.exports = {
```ts
// esbuild.config.js
import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver';
build({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),

50
packages/vant-auto-import-resolver/src/index.ts
View File

@@ -56,8 +56,48 @@ function getSideEffects(dirName: string, options: VantResolverOptions) {
return `vant/${moduleType}/${dirName}/style/index`;
}
function getAPIMap() {
const apiMap = new Map<string, string>();
const api = {
dialog: [
'showDialog',
'closeDialog',
'showConfirmDialog',
'setDialogDefaultOptions',
'resetDialogDefaultOptions',
],
imagePreview: ['showImagePreview'],
notify: [
'showNotify',
'closeNotify',
'setNotifyDefaultOptions',
'resetNotifyDefaultOptions',
],
toast: [
'showToast',
'closeToast',
'showFailToast',
'showLoadingToast',
'showSuccessToast',
'allowMultipleToast',
'setToastDefaultOptions',
'resetToastDefaultOptions',
],
};
Object.entries(api).forEach(([importName, apiList]) => {
apiList.forEach((api) => {
apiMap.set(api, importName);
});
});
return apiMap;
}
export function VantResolver(options: VantResolverOptions = {}) {
const moduleType = getModuleType(options);
const apiMap = getAPIMap();
return {
type: 'component' as const,
@@ -71,6 +111,16 @@ export function VantResolver(options: VantResolverOptions = {}) {
sideEffects: getSideEffects(kebabCase(partialName), options),
};
}
// import API
if (apiMap.has(name)) {
const partialName = apiMap.get(name)!;
return {
name,
from: `vant/${moduleType}`,
sideEffects: getSideEffects(kebabCase(partialName), options),
};
}
},
};
}