feat(auto-import-resolver): add module option (#12383)

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.

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` 选项来设置模块类型。

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 {
+function getModuleType(options: VantResolverOptions): string {
-  return ssr ? 'lib' : 'es';
+  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;
+  const { importStyle = true } = options;
-  if (!importStyle) return;
 
-  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(options);
-
-  const moduleType = getModuleType(ssr);
 
   return {
     type: 'component' as const,
+
     resolve: (name: string) => {
       if (name.startsWith('Van')) {
         const partialName = name.slice(3);

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 仓库下反馈。
 
 ## 在框架中使用