Javascript 在Vite React库中添加子模块路径

我有一个基于Vite的React库，目前 struct 如下:

import { Button, Typography, Box, Flex, Color, TypographyVariant } from '@placeholder-library';

我想分开导入以添加子模块，这样组件和共享就可以从不同的路径导入:

import { Button, Typography, Box, Flex } from '@placeholder-library/components’;
import { Color, TypographyVariant } from ‘@placeholder-library/shared’;

index.ts

import './index.scss';
export * from './components';
export * from './shared';

vite.config.ts:

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
  build: {
    outDir: 'build',
    lib: {
      entry: './src/index.ts',
      name: 'Placeholder Library',
      fileName: 'index',
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: [
        {
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
        },
        {
          dir: 'build/cjs',
          format: 'cjs',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
        },
        {
          dir: 'build/esm',
          format: 'esm',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
        },
      ],
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  plugins: [
    svgr(),
    react(),
    commonjs(),
    tsconfigPaths(),
    dts({
      outDir: ['build/cjs', 'build/esm', 'build'],
      include: ['./src/**/*'],
      exclude: ['**/*.stories.*'],
    }),
  ],
});

package.json:

{
  "name": "@placeholder-library",
  "version": "0.0.26",
  "description": "Placeholder Library components library",
  "license": "ISC",
  "main": "build/cjs/index.js",
  "module": "build/index.mjs",
  "files": ["*"],
  "scripts": {
    "build": "tsc && vite build",
    "build-storybook": "storybook build",
    "build-storybook-docs": "storybook build --docs",
    "dev": "vite",
    "format": "prettier --write .",
    "lint:fix": "eslint . --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "storybook-docs": "storybook dev --docs"
  },
  "dependencies": {
    "..."
  },
  "devDependencies": {
    "..."
  },
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

我的文件夹 struct : 我的文件夹 struct

src
    index.ts
    components
        index.ts
        Button
            index.ts
    shared
        hooks
        index.ts

组件中的index. ts:

export * from './Button'

如何配置Vite和我的包 struct 来实现组件和共享/utils的分离？任何建议或例子将不胜感激.

我试图修改100文件，以包含组件和shared/utils的单独条目，但我不知道如何正确配置路径.我还try 调整101文件，以便为组件和shared/utils指定不同的入口点，但我不确定如何正确地构造它.

import { Button, Typography, Box, Flex } from '@placeholder-library/components’;

import { Color, TypographyVariant } from ‘@placeholder-library/shared’;

然而，我找不到一个清晰的例子或文档来说明如何在基于Vite的React库中设置这个功能.如能提供关于如何实现这一点的任何指导或实例，将不胜感激.