无法通过rollup使用组件库中自写组件的导入

Question

我正在尝试用我自己的组件构建一个组件库。目前，我在使用

rollup

构建库的最后一步中遇到了麻烦。 我的文件夹结构如下

├── src
│   ├── components
|   │   ├── Text
|   |   │   ├── Text.tsx
|   |   │   ├── styles.css
|   |   │   └── index.ts
|   │   └── index.ts
│   └── index.ts
│   ├── molecules
|   │   ├── Button
|   |   │   ├── Button.tsx
|   |   │   ├── styles.css
|   |   │   └── index.ts
|   │   └── index.ts
│   └── index.ts
├── styles
│   └── general.ts
│   └── index.ts
├── package.json
└── package-lock.json

在

<Button />

中，我使用

<Text />

与

import Text from '/atoms/Text/Text.tsx'

这有效。但是，当我尝试使用

rollup

构建组件库时，我收到以下消息

(!) 未解决的依赖关系 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency atmos/base-text/Text.tsx（由“dist/esm/types/molecules/Button.d.ts”导入）

这是

tsconfig.js

{
  "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/*"
      ],
    }
  }
}

这是我的

rollup.config.mjs

import resolve, {nodeResolve} 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";

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(),
            nodeResolve(),
            typescript({tsconfig: "./tsconfig.json"}),
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        external: [/\.css$/],
        plugins: [dts.default()],
    },
];

为什么我无法导入自己的组件？

Answer 1

这取决于你的 rollup.config.mjs 中是否包含 css

解决这个问题

添加外部：[/.css$/]

如下面的代码；

export default [
....
 {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.css$/],
  },
];