[Feature Request] 请问vant-cli@4.x 如何按需导入类似vant这样的ui库(包含样式)以及如何自定义导出不同目录(同时构建多个版本基于vue-demi)

这个功能解决了什么问题？

构建库的时候可以依赖其他库进行复合组件的开发。构建库的时候同时导出多个构建版本比如（vue2 以及vue3）

你期望的 API 是什么样子的？

比如我在vite.config.js中是这样写的:

// @ts-nocheck
// yarn build 用到的vite配置

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import path from 'path';
import Components from 'unplugin-vue-components/vite'
import {
  VantResolver,
} from 'unplugin-vue-components/resolvers'
import styleImport from 'vite-plugin-style-import';
import { defineConfig } from 'vite';

import pkg from './package.json'
const fileName = pkg.name.replace('@maybecode/', '')

const resolve = (str) => {
  return path.resolve(__dirname, str)
}

/**
 * @type {import('vite').UserConfig}
 */
export default ({ command, mode }) => {
  const baseConfig = {
    optimizeDeps: {
      include: [],
      exclude: [],
    },
    plugins: [
      // Components({
      //   resolvers: [
      //     VantResolver()
      //   ]
      // })
    ],
    build: {
      minify: true,
      lib: {
        entry: resolve(__dirname, 'index.html'),
        name: 'v-power'
      },
      rollupOptions: {
        // make sure to externalize deps that shouldn't be bundled
        // into your library
        external: ['vue'],
        input: resolve('./src/index.ts'),
        output: [{
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            vue: 'Vue',
            // vant: 'vant'
          },
          entryFileNames: `${fileName}.es.js`,
          dir: `dist/${mode}`,
          format: 'esm',
        }, {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            vue: 'Vue',
            // vant: 'vant'
          },
          entryFileNames: `${fileName}..cmj.js`,
          dir: `dist/${mode}`,
          format: 'commonjs',
        },
        {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            vue: 'Vue',
            // vant: 'vant'
          },
          entryFileNames: `${fileName}..umd.js`,
          dir: `dist/${mode}`,
          format: 'umd',
        }
        ],
      },
    },
  };
  console.log('mode', mode)
  if (mode === 'vue2') {
    const { createVuePlugin } = require('vite-plugin-vue2');
    baseConfig.plugins.unshift(...[
      createVuePlugin({ jsx: true, }),
      styleImport({
        libs: [
          {
            libraryName: 'vant',
            esModule: true,
            resolveStyle: (name) => {
              return `vant/lib/${name}/style`;
            },
            resolveComponent: (name) => {
              return `vant/lib/${name}`;
            },
          },
        ],
      }),
    ]);
    baseConfig.build.outDir = 'dist/vue2';
  } else if (mode == 'vue3') {
    baseConfig.plugins.unshift(...[
      vue(),
      vueJsx(),
      styleImport({
        libs: [
          {
            libraryName: 'vant',
            esModule: true,
            resolveStyle: (name) => {
              return `vant/es/${name}/style`;
            },
            resolveComponent: (name) => {
              return `vant/es/${name}`;
            },
          },
        ],
      }),
    ]);
    baseConfig.build.outDir = 'dist/vue3';
  }
  return baseConfig;
};

package.json

{
  "name": "@maybecode/v-power",
  "version": "1.0.0",
  "description": "",
  "main": "dist/vue3/v-power.umd.js",
  "module": "dist/vue3/v-power.es.js",
  "exports": {
    ".": {
      "import": "dist/vue3/v-power.es.js",
      "require": "dist/vue3/v-power.umd.js"
    }
  },
  "scripts": {
    "postinstall": "node ./scripts/postinstall.js",
    "switch:vue2": "node scripts/switch-version.js vue2",
    "switch:vue3": "node scripts/switch-version.js vue3",
    "build:v2": " npm run switch:vue2 && vue-demi-switch 2 && vite build --mode vue2 && yarn type",
    "build:v3": "npm run switch:vue3 && vue-demi-switch 3 && npm run build"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.4.0",
    "vue": "^2.0.0 || >=3.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  },
  "devDependencies": {
    "typescript": "^4.4.4",
    "unplugin-vue-components": "^0.17.2",
    "vant": "^3.0.0",
    "vant2": "npm:vant@2",
    "vant3": "npm:vant@3",
    "vite": "^2.6.13",
    "vite-plugin-style-import": "^1.3.0",
    "vite-plugin-vue2": "^1.9.0",
    "vitepress-for-component": "^0.16.2",
    "vue": "^3.0.0",
    "vue-jest": "^5.0.0-alpha.6",
    "vue-template-compiler": "^2.6.14",
    "vue-tsc": "^0.29.2",
    "vue2": "npm:vue@2",
    "vue3": "npm:vue@3"
  },
  "keywords": [
    "vue",
    "vue3",
    "components"
  ],
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "dayjs": "^1.10.7",
    "vue-demi": "^0.12.1"
  }
}

youzan / vant

[Feature Request] 请问vant-cli@4.x 如何按需导入类似vant这样的ui库(包含样式)以及如何自定义导出不同目录(同时构建多个版本基于vue-demi) #9969

这个功能解决了什么问题？

你期望的 API 是什么样子的？