如何为 TypeScript React 组件库设置汇总配置？

Question

我正在使用打字稿创建一个反应组件库，但在使用组件时遇到问题。

我目前只有一个按钮组件，因为我刚刚开始这个项目。但是，当我与 rollup 捆绑并发布到 npm （我使用 github 的 npm 注册表），然后将包安装到项目上时，onClick 事件不起作用。

在库中测试时单击事件起作用，但一旦我尝试将其用作实际包，它们就不再起作用。

这是我当前的汇总配置：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import terser from "@rollup/plugin-terser";

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

这是我的按钮组件：

import React from "react";

export interface ButtonProps {
  /**
   * The button lable.
   */
  variant?: "primary" | "secondary" | "danger" | "outline" | "ghost";
  /**
   * Is the button disabled?
   */
  disabled?: boolean;
  /**
   * Is Rounded?
   */
  rounded?: boolean;
  /**
   * Theme variant.
   */
  theme?: "dark" | "light";
  /**
   * Any children.
   */
  children?: any;
  /**
   * Size type.
   */
  size?: "small" | "normal" | "large" | "icon";
  /**
   * On click action.
   */
  onClick?: () => void;
}

const Button = ({
  disabled = false,
  variant = "primary",
  rounded = true,
  theme = "dark",
  children,
  size = "normal",
  onClick = () => {},
}: ButtonProps) => {
  let variantStyle = "";
  switch (variant) {
    case "primary":
      if (theme === "dark") {
        variantStyle = "bg-slate-100 text-slate-900 hover:enabled:bg-slate-300";
      } else {
        variantStyle = "bg-slate-900 text-slate-200 hover:enabled:bg-slate-700";
      }
      break;
    case "secondary":
      if (theme === "dark") {
        variantStyle = "bg-slate-500 text-slate-100 hover:enabled:bg-slate-400";
      } else {
        variantStyle = "bg-slate-300 text-slate-900 hover:enabled:bg-slate-100";
      }
      break;
    case "danger":
      variantStyle = "bg-rose-600 text-slate-100 hover:enabled:bg-rose-400";
      break;
    case "outline":
      if (theme === "dark") {
        variantStyle =
          "border-2 border-slate-100 text-slate-100 hover:enabled:bg-slate-100 hover:enabled:text-slate-900";
      } else {
        variantStyle =
          "border-2 border-slate-900 text-slate-900 hover:enabled:bg-slate-900 hover:enabled:text-slate-100";
      }
      break;
    case "ghost":
      if (theme === "dark") {
        variantStyle =
          "text-slate-100 hover:enabled:bg-slate-100 hover:enabled:text-slate-900";
      } else {
        variantStyle =
          "text-slate-900 hover:enabled:bg-slate-900 hover:enabled:text-slate-100";
      }
      break;
    default:
      if (theme === "dark") {
        variantStyle = "bg-slate-100 text-slate-900 hover:enabled:bg-slate-300";
      } else {
        variantStyle = "bg-slate-900 text-slate-200 hover:enabled:bg-slate-700";
      }
      break;
  }

  let sizeStyle = "";
  switch (size) {
    case "small":
      sizeStyle = "px-2 py-1 text-xs";
      break;
    case "normal":
      sizeStyle = "px-4 py-2 text-base";
      break;
    case "large":
      sizeStyle = "px-8 py-4 text-xl";
      break;
    case "icon":
      sizeStyle = "px-2 py-2 text-base";
      break;
    default:
      sizeStyle = "px-4 py-2 text-base";
      break;
  }

  return (
    <button
      onClick={() => {
        onClick();
      }}
      className={`${variantStyle} ${sizeStyle} ${
        rounded ? "rounded-md" : ""
      } ease-in-out duration-300 p-2 disabled:opacity-50 
      flex flex-row justify-center items-center`}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

如果我只是从库中复制按钮组件代码并将其放入我使用它的任何项目的组件文件中，那么按钮将按预期运行。 onClick 函数有效。这就是为什么我相信这是 rollup 的原因。

这就是我目前尝试实现 Button 组件的方式：

<Button onClick={() => console.log("Test")} >Test Button</Button>

我已经为此摸不着头脑有一段时间了。非常感谢任何帮助！