From 96cbb04bc0204a1ff0beb5754ef4e9e9abda5b1f Mon Sep 17 00:00:00 2001 From: zhaojjiang <39524531+zhaojjiang@users.noreply.github.com> Date: Sat, 18 May 2024 20:39:28 +0800 Subject: [PATCH] feat: supports `imports` option for auto-import (#12861) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 赵江江 --- packages/vant-auto-import-resolver/README.md | 18 ++++++++----- .../vant-auto-import-resolver/README.zh-CN.md | 18 ++++++++----- .../vant-auto-import-resolver/src/index.ts | 10 +++++++ .../vant/docs/markdown/quickstart.en-US.md | 26 ++++++++++++------- .../vant/docs/markdown/quickstart.zh-CN.md | 26 ++++++++++++------- 5 files changed, 68 insertions(+), 30 deletions(-) diff --git a/packages/vant-auto-import-resolver/README.md b/packages/vant-auto-import-resolver/README.md index 42e20caa1..2cd3b0481 100644 --- a/packages/vant-auto-import-resolver/README.md +++ b/packages/vant-auto-import-resolver/README.md @@ -34,11 +34,12 @@ bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import // vite.config.ts import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -54,11 +55,12 @@ export default defineConfig({ // rollup.config.js import AutoImport from 'unplugin-auto-import/rollup'; import Components from 'unplugin-vue-components/rollup'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -74,11 +76,12 @@ export default { // webpack.config.js import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -94,11 +97,12 @@ module.exports = { // rspack.config.js import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -114,12 +118,13 @@ module.exports = { // vue.config.js import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { configureWebpack: { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -137,11 +142,12 @@ module.exports = { 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; build({ plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ diff --git a/packages/vant-auto-import-resolver/README.zh-CN.md b/packages/vant-auto-import-resolver/README.zh-CN.md index f8abe675f..24ff1ff79 100644 --- a/packages/vant-auto-import-resolver/README.zh-CN.md +++ b/packages/vant-auto-import-resolver/README.zh-CN.md @@ -34,11 +34,12 @@ bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import // vite.config.ts import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -54,11 +55,12 @@ export default defineConfig({ // rollup.config.js import AutoImport from 'unplugin-auto-import/rollup'; import Components from 'unplugin-vue-components/rollup'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -74,11 +76,12 @@ export default { // webpack.config.js import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -94,11 +97,12 @@ module.exports = { // rspack.config.js import AutoImport from 'unplugin-auto-import/rspack'; import Components from 'unplugin-vue-components/rspack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -114,12 +118,13 @@ module.exports = { // vue.config.js import AutoImport from 'unplugin-auto-import/webpack'; import Components from 'unplugin-vue-components/webpack'; -import { VantResolver } from '@vant/auto-import-resolver'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; module.exports = { configureWebpack: { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -137,11 +142,12 @@ module.exports = { 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; build({ plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ diff --git a/packages/vant-auto-import-resolver/src/index.ts b/packages/vant-auto-import-resolver/src/index.ts index cb540d281..aeb0a672b 100644 --- a/packages/vant-auto-import-resolver/src/index.ts +++ b/packages/vant-auto-import-resolver/src/index.ts @@ -23,6 +23,8 @@ export interface VantResolverOptions { ssr?: boolean; } +export type VantImportsOptions = Pick; + /** * Button->button; ButtonGroup->button-group */ @@ -124,3 +126,11 @@ export function VantResolver(options: VantResolverOptions = {}) { }, }; } + +export function VantImports(options: VantImportsOptions = {}) { + const moduleType = getModuleType(options); + + return { + [`vant/${moduleType}`]: getAPIMap().keys(), + }; +} diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 19c067fc6..c9a6ff213 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -152,7 +152,7 @@ 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [pluginVue()], @@ -160,6 +160,7 @@ export default defineConfig({ rspack: { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -177,12 +178,13 @@ For Vite based project，configure the plugin in the `vite.config.js` file: 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -195,7 +197,7 @@ export default { For vue-cli based project，configure the plugin in the `vue.config.js` file: ```js -const { VantResolver } = require('@vant/auto-import-resolver'); +const { VantResolver, VantImports } = require('@vant/auto-import-resolver'); const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); @@ -203,10 +205,13 @@ module.exports = { configureWebpack: { plugins: [ // When the version of unplugin-vue-components is less than 0.26.0: - AutoImport({ resolvers: [VantResolver()] }), + AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0: - AutoImport.default({ resolvers: [VantResolver()] }), + AutoImport.default({ + imports: [VantImports()], + resolvers: [VantResolver()], + }), Components.default({ resolvers: [VantResolver()] }), ], }, @@ -216,17 +221,20 @@ module.exports = { For webpack based project，configure the plugin in the `webpack.config.js` file: ```js -const { VantResolver } = require('@vant/auto-import-resolver'); +const { VantResolver, VantImports } = require('@vant/auto-import-resolver'); 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: - AutoImport({ resolvers: [VantResolver()] }), + AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0: - AutoImport.default({ resolvers: [VantResolver()] }), + AutoImport.default({ + imports: [VantImports()], + resolvers: [VantResolver()], + }), Components.default({ resolvers: [VantResolver()] }), ], }; @@ -246,7 +254,7 @@ Then you can using components from Vant in the template, the `unplugin-vue-compo ```html ``` diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 6a4b91e58..2ec52ec11 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -174,7 +174,7 @@ 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default defineConfig({ plugins: [pluginVue()], @@ -182,6 +182,7 @@ export default defineConfig({ rspack: { plugins: [ AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -199,12 +200,13 @@ export default defineConfig({ 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'; +import { VantResolver, VantImports } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), AutoImport({ + imports: [VantImports()], resolvers: [VantResolver()], }), Components({ @@ -217,7 +219,7 @@ export default { 如果是基于 vue-cli 的项目，在 `vue.config.js` 文件中配置插件： ```js -const { VantResolver } = require('@vant/auto-import-resolver'); +const { VantResolver, VantImports } = require('@vant/auto-import-resolver'); const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); @@ -225,10 +227,13 @@ module.exports = { configureWebpack: { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 - AutoImport({ resolvers: [VantResolver()] }), + AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法 - AutoImport.default({ resolvers: [VantResolver()] }), + AutoImport.default({ + imports: [VantImports()], + resolvers: [VantResolver()], + }), Components.default({ resolvers: [VantResolver()] }), ], }, @@ -238,17 +243,20 @@ module.exports = { 如果是基于 webpack 的项目，在 `webpack.config.js` 文件中配置插件： ```js -const { VantResolver } = require('@vant/auto-import-resolver'); +const { VantResolver, VantImports } = require('@vant/auto-import-resolver'); const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); module.exports = { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法 - AutoImport({ resolvers: [VantResolver()] }), + AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法 - AutoImport.default({ resolvers: [VantResolver()] }), + AutoImport.default({ + imports: [VantImports()], + resolvers: [VantResolver()], + }), Components.default({ resolvers: [VantResolver()] }), ], }; @@ -268,7 +276,7 @@ module.exports = { ```html ```