blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 165 additions and 71 deletions
Show Stats 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 ```shell
# via npm # 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 # 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 # 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 # 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 ## Usage
@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
```ts ```ts
// vite.config.ts // vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -48,11 +52,15 @@ export default defineConfig({
```ts ```ts
// rollup.config.js // rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup'; import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default { export default {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -64,11 +72,15 @@ export default {
```ts ```ts
// webpack.config.js // webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack'; import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -80,11 +92,15 @@ module.exports = {
```ts ```ts
// rspack.config.js // rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack'; import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -96,12 +112,16 @@ module.exports = {
```ts ```ts
// vue.config.js // vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack'; import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
configureWebpack: { configureWebpack: {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -115,11 +135,15 @@ module.exports = {
```ts ```ts
// esbuild.config.js // esbuild.config.js
import { build } from 'esbuild'; import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild'; import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
build({ build({
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),

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

@ -14,16 +14,16 @@
```shell ```shell
# via npm # 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 # 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 # 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 # 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 ```ts
// vite.config.ts // vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -48,11 +52,15 @@ export default defineConfig({
```ts ```ts
// rollup.config.js // rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup'; import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default { export default {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -64,11 +72,15 @@ export default {
```ts ```ts
// webpack.config.js // webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack'; import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -80,11 +92,15 @@ module.exports = {
```ts ```ts
// rspack.config.js // rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack'; import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -96,12 +112,16 @@ module.exports = {
```ts ```ts
// vue.config.js // vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack'; import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
module.exports = { module.exports = {
configureWebpack: { configureWebpack: {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -115,11 +135,15 @@ module.exports = {
```ts ```ts
// esbuild.config.js // esbuild.config.js
import { build } from 'esbuild'; import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild'; import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
build({ build({
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], 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`; 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 = {}) { export function VantResolver(options: VantResolverOptions = {}) {
const moduleType = getModuleType(options); const moduleType = getModuleType(options);
const apiMap = getAPIMap();
return { return {
type: 'component' as const, type: 'component' as const,
@ -71,6 +111,16 @@ export function VantResolver(options: VantResolverOptions = {}) {
sideEffects: getSideEffects(kebabCase(partialName), options), 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),
};
}
}, },
}; };
} }

60
packages/vant/docs/markdown/quickstart.en-US.md
View File

@ -131,16 +131,16 @@ Compared with conventional usage, this method can introduce the CSS style of com
```bash ```bash
# with npm # with npm
npm i @vant/auto-import-resolver unplugin-vue-components -D npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# with yarn # with yarn
yarn add @vant/auto-import-resolver unplugin-vue-components -D yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# with pnpm # with pnpm
pnpm add @vant/auto-import-resolver unplugin-vue-components -D pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# with Bun # with Bun
bun add @vant/auto-import-resolver unplugin-vue-components -D bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
``` ```
#### 2. Configure Plugin #### 2. Configure Plugin
@ -150,6 +150,7 @@ For Rsbuild based project，configure the plugin in the `rsbuild.config.js` file
```js ```js
import { defineConfig } from '@rsbuild/core'; import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue'; import { pluginVue } from '@rsbuild/plugin-vue';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack'; import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
@ -158,6 +159,9 @@ export default defineConfig({
tools: { tools: {
rspack: { rspack: {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -171,12 +175,16 @@ For Vite based project，configure the plugin in the `vite.config.js` file:
```js ```js
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default { export default {
plugins: [ plugins: [
vue(), vue(),
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -188,15 +196,18 @@ For vue-cli based project，configure the plugin in the `vue.config.js` file:
```js ```js
const { VantResolver } = require('@vant/auto-import-resolver'); const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack'); const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = { module.exports = {
configureWebpack: { configureWebpack: {
plugins: [ plugins: [
// When the version of unplugin-vue-components is less than 0.26.0: // When the version of unplugin-vue-components is less than 0.26.0:
ComponentsPlugin({ resolvers: [VantResolver()] }), AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
// when the unplugin-vue-components version is greater than or equal to 0.26.0: // when the unplugin-vue-components version is greater than or equal to 0.26.0:
ComponentsPlugin.default({ resolvers: [VantResolver()] }), AutoImport.default({ resolvers: [VantResolver()] }),
Components.default({ resolvers: [VantResolver()] }),
], ],
}, },
}; };
@ -206,14 +217,17 @@ For webpack based project，configure the plugin in the `webpack.config.js` file
```js ```js
const { VantResolver } = require('@vant/auto-import-resolver'); const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack'); const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = { module.exports = {
plugins: [ plugins: [
// When the version of unplugin-vue-components is less than 0.26.0: // When the version of unplugin-vue-components is less than 0.26.0:
ComponentsPlugin({ resolvers: [VantResolver()] }), AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
// when the unplugin-vue-components version is greater than or equal to 0.26.0: // when the unplugin-vue-components version is greater than or equal to 0.26.0:
ComponentsPlugin.default({ resolvers: [VantResolver()] }), AutoImport.default({ resolvers: [VantResolver()] }),
Components.default({ resolvers: [VantResolver()] }),
], ],
}; };
``` ```
@ -228,30 +242,14 @@ Then you can using components from Vant in the template, the `unplugin-vue-compo
</template> </template>
``` ```
#### 4. Style of Function Components `unplugin-auto-import` will automatically import the corresponding Vant API and styles.
Some components of Vant are provided as function, including `Toast`, `Dialog`, `Notify` and `ImagePreview`. When using function components, `unplugin-vue-components` cannot parse the automatic registration component, resulting in `@vant/auto-import-resolver` unable to parse the style, so the style needs to be introduced manually. ```html
<script>
```js showToast('No need to import showToast')
// Toast </script>
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';
``` ```
> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
#### Tips #### Tips
- "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides. - "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.

62
packages/vant/docs/markdown/quickstart.zh-CN.md
View File

@ -153,16 +153,16 @@ Vant 官方基于 `unplugin-vue-components` 提供了自动导入样式的解析
```bash ```bash
# 通过 npm 安装 # 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components -D npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 yarn 安装 # 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components -D yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 pnpm 安装 # 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components -D pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 bun 安装 # 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components -D bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
``` ```
#### 2. 配置插件 #### 2. 配置插件
@ -172,6 +172,7 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
```js ```js
import { defineConfig } from '@rsbuild/core'; import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue'; import { pluginVue } from '@rsbuild/plugin-vue';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack'; import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
@ -180,6 +181,9 @@ export default defineConfig({
tools: { tools: {
rspack: { rspack: {
plugins: [ plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -193,12 +197,16 @@ export default defineConfig({
```js ```js
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver'; import { VantResolver } from '@vant/auto-import-resolver';
export default { export default {
plugins: [ plugins: [
vue(), vue(),
AutoImport({
resolvers: [VantResolver()],
}),
Components({ Components({
resolvers: [VantResolver()], resolvers: [VantResolver()],
}), }),
@ -210,15 +218,18 @@ export default {
```js ```js
const { VantResolver } = require('@vant/auto-import-resolver'); const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack'); const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = { module.exports = {
configureWebpack: { configureWebpack: {
plugins: [ plugins: [
// 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
ComponentsPlugin({ resolvers: [VantResolver()] }), AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法 //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
ComponentsPlugin.default({ resolvers: [VantResolver()] }), AutoImport.default({ resolvers: [VantResolver()] }),
Components.default({ resolvers: [VantResolver()] }),
], ],
}, },
}; };
@ -228,19 +239,22 @@ module.exports = {
```js ```js
const { VantResolver } = require('@vant/auto-import-resolver'); const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack'); const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = { module.exports = {
plugins: [ plugins: [
// 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
ComponentsPlugin({ resolvers: [VantResolver()] }), AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法 //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
ComponentsPlugin.default({ resolvers: [VantResolver()] }), AutoImport.default({ resolvers: [VantResolver()] }),
Components.default({ resolvers: [VantResolver()] }),
], ],
}; };
``` ```
#### 3. 使用组件 #### 3. 使用组件和 API
完成以上两步，就可以直接在模板中使用 Vant 组件了，`unplugin-vue-components` 会解析模板并自动注册对应的组件, `@vant/auto-import-resolver` 会自动引入对应的组件样式。 完成以上两步，就可以直接在模板中使用 Vant 组件了，`unplugin-vue-components` 会解析模板并自动注册对应的组件, `@vant/auto-import-resolver` 会自动引入对应的组件样式。
@ -250,30 +264,14 @@ module.exports = {
</template> </template>
``` ```
#### 4. 引入函数组件的样式 `unplugin-auto-import` 会自动导入对应的 Vant API 以及样式。
Vant 中有个别组件是以函数的形式提供的，包括 `Toast`，`Dialog`，`Notify` 和 `ImagePreview` 组件。在使用函数组件时，`unplugin-vue-components` 无法解析自动注册组件，导致 `@vant/auto-import-resolver` 无法解析样式，因此需要手动引入样式。 ```html
<script>
```js showToast('No need to import showToast')
// Toast </script>
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';
``` ```
你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
#### 使用提示 #### 使用提示
- 请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。 - 请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。