From 295865a8293a8516797efd5f47e0a5ff153d47a6 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 22 Oct 2023 21:45:24 +0800 Subject: [PATCH] feat(auto-import-resolver): add module option (#12383) --- packages/vant-auto-import-resolver/README.md | 25 +++++++++++ .../vant-auto-import-resolver/README.zh-CN.md | 25 +++++++++++ .../vant-auto-import-resolver/src/index.ts | 42 +++++++++++++------ .../vant/docs/markdown/quickstart.zh-CN.md | 2 +- 4 files changed, 81 insertions(+), 13 deletions(-) diff --git a/packages/vant-auto-import-resolver/README.md b/packages/vant-auto-import-resolver/README.md index 93d0e5e84..0d013fe8f 100644 --- a/packages/vant-auto-import-resolver/README.md +++ b/packages/vant-auto-import-resolver/README.md @@ -147,3 +147,28 @@ Components({ ], }); ``` + +### module + +Specifies the type of module to be imported. + +- **Type:** `'esm' | 'cjs'` +- **Default:** `'esm'` +- **Example:** + +```ts +Components({ + resolvers: [ + VantResolver({ + module: 'cjs', + }), + ], +}); +``` + +### ssr + +- **Type:** `boolean` +- **Default:** `undefined` + +This option is deprecated. Please use the `module` option to set the module type. diff --git a/packages/vant-auto-import-resolver/README.zh-CN.md b/packages/vant-auto-import-resolver/README.zh-CN.md index 839bbc2cb..cf10550aa 100644 --- a/packages/vant-auto-import-resolver/README.zh-CN.md +++ b/packages/vant-auto-import-resolver/README.zh-CN.md @@ -147,3 +147,28 @@ Components({ ], }); ``` + +### module + +设置引用的模块类型。 + +- **Type:** `'esm' | 'cjs'` +- **Default:** `'esm'` +- **Example:** + +```ts +Components({ + resolvers: [ + VantResolver({ + module: 'cjs', + }), + ], +}); +``` + +### ssr + +- **Type:** `boolean` +- **Default:** `undefined` + +此选项已废弃,请使用 `module` 选项来设置模块类型。 diff --git a/packages/vant-auto-import-resolver/src/index.ts b/packages/vant-auto-import-resolver/src/index.ts index 107d7060f..46ce1f0e7 100644 --- a/packages/vant-auto-import-resolver/src/index.ts +++ b/packages/vant-auto-import-resolver/src/index.ts @@ -1,15 +1,24 @@ export interface VantResolverOptions { /** - * import style css or less along with components + * Whether to automatically import the corresponding styles of the components. * * @default true */ - importStyle?: boolean | 'css' | 'less'; + importStyle?: + | boolean + | 'css' + /** Compatible with Vant 2.x / 3.x */ + | 'less'; /** - * use lib + * Set the referenced module type. * - * @default false + * @default 'esm' + */ + module?: 'esm' | 'cjs'; + + /** + * @deprecated Please use `module` option instead. */ ssr?: boolean; } @@ -22,15 +31,25 @@ function kebabCase(key: string) { return result.split(' ').join('-').toLowerCase(); } -function getModuleType(ssr: boolean): string { - return ssr ? 'lib' : 'es'; +function getModuleType(options: VantResolverOptions): string { + const { ssr, module = 'esm' } = options; + + // compatible with the deprecated `ssr` option + if (ssr !== undefined) { + return ssr ? 'lib' : 'es'; + } + + return module === 'cjs' ? 'lib' : 'es'; } function getSideEffects(dirName: string, options: VantResolverOptions) { - const { importStyle = true, ssr = false } = options; - if (!importStyle) return; + const { importStyle = true } = options; - const moduleType = getModuleType(ssr); + if (!importStyle) { + return; + } + + const moduleType = getModuleType(options); if (importStyle === 'less') return `vant/${moduleType}/${dirName}/style/less`; @@ -38,12 +57,11 @@ function getSideEffects(dirName: string, options: VantResolverOptions) { } export function VantResolver(options: VantResolverOptions = {}) { - const { ssr = false } = options; - - const moduleType = getModuleType(ssr); + const moduleType = getModuleType(options); return { type: 'component' as const, + resolve: (name: string) => { if (name.startsWith('Van')) { const partialName = name.slice(3); diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 6d8ddbcdf..ff4bc2099 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -238,7 +238,7 @@ import 'vant/es/image-preview/style'; - 请避免同时使用「全量引入」和「按需引入」这两种引入方式,否则会导致代码重复、样式错乱等问题。 - 在使用过程中,如果你遇到组件不能导入的问题,因为 unplugin-vue-components 并不是 Vant 官方维护的插件,所以建议到 [unplugin/unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 仓库下反馈。 -- `@vant/auto-import-resolver` 提供了一些配置项,请参考 [README 文档](<(https://github.com/youzan/vant/tree/main/packages/vant-auto-import-resolver)>) 来了解更多。 +- `@vant/auto-import-resolver` 提供了一些配置项,请参考 [README 文档](https://github.com/youzan/vant/tree/main/packages/vant-auto-import-resolver) 来了解更多。 - 如果是样式不生效的相关问题,你可以在 Vant 仓库下反馈。 ## 在框架中使用