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

Question

我有一个基于 Vite 的 React 库，目前的结构如下：

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"
  }
}

我的文件夹结构： 我的文件夹结构

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

组件中的index.ts：

export * from './Button'

如何配置 Vite 和我的包结构来实现组件和共享/实用程序的分离？任何建议或例子将不胜感激。

我尝试修改

vite.config.ts

文件以包含组件和共享/实用程序的单独条目，但我不知道如何正确配置路径。我还尝试调整

package.json

文件以指定组件和共享/实用程序的不同入口点，但我不确定如何正确构建它。

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

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

但是，我找不到关于如何在基于 Vite 的 React 库中进行设置的明确示例或文档。任何有关如何实现这一目标的指导或示例将不胜感激。

Answer 1

我认为演示比来回更容易：https://github.com/quyentho/submodule-demo

您可以检查我的

dist/

中的

placeholder-lib

文件夹，看看您生成的构建是否具有类似的结构。你可以看到我在我的

consumer

中包含这样的内容是没有问题的：

import { Button } from "placeholder-lib/components";
import useMyHook from "placeholder-lib/shared";

我猜，你的问题可能是

package.json

中的这些导出行

  "exports": {
    ".": "./dist/index.js",
    "./components": "./dist/components/index.js",
    "./shared": "./dist/shared/index.js"
  },