From 66d8a1800c196aa2554d6ea0b458f9ec84c1f27d Mon Sep 17 00:00:00 2001 From: dragonzhang <52599892+DragonnZhang@users.noreply.github.com> Date: Sun, 17 Mar 2024 09:41:00 +0800 Subject: [PATCH] feat: support unplugin-auto-import plugin (#12679) --- packages/vant-auto-import-resolver/README.md | 32 ++++++++-- .../vant-auto-import-resolver/README.zh-CN.md | 32 ++++++++-- .../vant-auto-import-resolver/src/index.ts | 50 +++++++++++++++ .../vant/docs/markdown/quickstart.en-US.md | 60 +++++++++--------- .../vant/docs/markdown/quickstart.zh-CN.md | 62 +++++++++---------- 5 files changed, 165 insertions(+), 71 deletions(-) diff --git a/packages/vant-auto-import-resolver/README.md b/packages/vant-auto-import-resolver/README.md index 0d013fe8f08..42e20caa17d 100644 --- a/packages/vant-auto-import-resolver/README.md +++ b/packages/vant-auto-import-resolver/README.md @@ -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()], }), diff --git a/packages/vant-auto-import-resolver/README.zh-CN.md b/packages/vant-auto-import-resolver/README.zh-CN.md index cf10550aafe..f8abe675f09 100644 --- a/packages/vant-auto-import-resolver/README.zh-CN.md +++ b/packages/vant-auto-import-resolver/README.zh-CN.md @@ -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()], }), diff --git a/packages/vant-auto-import-resolver/src/index.ts b/packages/vant-auto-import-resolver/src/index.ts index 46ce1f0e70a..cb540d28184 100644 --- a/packages/vant-auto-import-resolver/src/index.ts +++ b/packages/vant-auto-import-resolver/src/index.ts @@ -56,8 +56,48 @@ function getSideEffects(dirName: string, options: VantResolverOptions) { return `vant/${moduleType}/${dirName}/style/index`; } +function getAPIMap() { + const apiMap = new Map(); + + 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), + }; + } }, }; } diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 940ecbfa170..19c067fc6f7 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -131,16 +131,16 @@ Compared with conventional usage, this method can introduce the CSS style of com ```bash # 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 -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 -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 -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 @@ -150,6 +150,7 @@ For Rsbuild based project，configure the plugin in the `rsbuild.config.js` file ```js import { defineConfig } from '@rsbuild/core'; import { pluginVue } from '@rsbuild/plugin-vue'; +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; @@ -158,6 +159,9 @@ export default defineConfig({ tools: { rspack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -171,12 +175,16 @@ For Vite based project，configure the plugin in the `vite.config.js` file: ```js import vue from '@vitejs/plugin-vue'; +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -188,15 +196,18 @@ For vue-cli based project，configure the plugin in the `vue.config.js` file: ```js 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 = { configureWebpack: { plugins: [ // 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: - 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 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 = { plugins: [ // 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: - 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 ``` -#### 4. Style of Function Components - -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. - -```js -// Toast -import { showToast } from 'vant'; -import 'vant/es/toast/style'; +`unplugin-auto-import` will automatically import the corresponding Vant API and styles. -// 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'; +```html + ``` -> 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 - "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. diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 78899ac5e21..6a4b91e58c8 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -153,16 +153,16 @@ Vant 官方基于 `unplugin-vue-components` 提供了自动导入样式的解析 ```bash # 通过 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 add @vant/auto-import-resolver unplugin-vue-components -D +yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 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 add @vant/auto-import-resolver unplugin-vue-components -D +bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D ``` #### 2. 配置插件 @@ -172,6 +172,7 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D ```js import { defineConfig } from '@rsbuild/core'; import { pluginVue } from '@rsbuild/plugin-vue'; +import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; import { VantResolver } from '@vant/auto-import-resolver'; @@ -180,6 +181,9 @@ export default defineConfig({ tools: { rspack: { plugins: [ + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -193,12 +197,16 @@ export default defineConfig({ ```js import vue from '@vitejs/plugin-vue'; +import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), + AutoImport({ + resolvers: [VantResolver()], + }), Components({ resolvers: [VantResolver()], }), @@ -210,15 +218,18 @@ export default { ```js 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 = { configureWebpack: { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), //当 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 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 = { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 - ComponentsPlugin({ resolvers: [VantResolver()] }), + AutoImport({ resolvers: [VantResolver()] }), + Components({ resolvers: [VantResolver()] }), //当 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` 会自动引入对应的组件样式。 @@ -250,30 +264,14 @@ module.exports = { ``` -#### 4. 引入函数组件的样式 - -Vant 中有个别组件是以函数的形式提供的，包括 `Toast`，`Dialog`，`Notify` 和 `ImagePreview` 组件。在使用函数组件时，`unplugin-vue-components` 无法解析自动注册组件，导致 `@vant/auto-import-resolver` 无法解析样式，因此需要手动引入样式。 - -```js -// Toast -import { showToast } from 'vant'; -import 'vant/es/toast/style'; - -// Dialog -import { showDialog } from 'vant'; -import 'vant/es/dialog/style'; +`unplugin-auto-import` 会自动导入对应的 Vant API 以及样式。 -// Notify -import { showNotify } from 'vant'; -import 'vant/es/notify/style'; - -// ImagePreview -import { showImagePreview } from 'vant'; -import 'vant/es/image-preview/style'; +```html + ``` -你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。 - #### 使用提示 - 请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。