使用 Rollup 构建组件库时解决组件内部引用问题

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import dts from "rollup-plugin-dts";
import packageJson from "./package.json";

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
                name: 'ui-components'
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            external(),
            postcss(),
            terser(),
            typescript({ tsconfig: "./tsconfig.json" }),
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        external: [/\.css$/],
        plugins: [dts.default()],
    },
];

{
  "compilerOptions": {
    "target": "es2016",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "emitDeclarationOnly": true,
    "sourceMap": true,
    "outDir": "dist",
    "declarationDir": "types",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "allowImportingTsExtensions": true,
    "baseUrl": "src",
    "rootDir": "src",
    "paths": {
      "atoms/*": [
        "atoms/*"
      ],
      "molecules/*": [
        "molecules/*"
      ],
      "styles/*": [
        "styles/*"
      ]
    }
  }
}

src/
├── components/
│   ├── Text/
│   │   ├── Text.tsx
│   │   └── index.ts
│   └── index.ts
└── index.ts

import Text from 'atoms/Text/Text'; // 假设 atoms 是 paths 中配置的别名

rm -rf dist # 删除 dist 目录
npm run build # 重新构建项目