发布一个 react 组件到 npm 仓库

我正在参加「掘金·启航计划」

我们经常写一些组件想共享给大家使用，那把它发布到 npm 包仓库是一个很好的办法

这里我们使用的是 react,所以可以用 create-react-app 把项目跑起来

npx create-react-app my-react-coms --template typescript

我们写一个小组件TipsBanner,作用是展示一个带警告的消息，并可以关闭

在 /src下创建文件夹 TipsBanner,里面的文件大致如下

assets放一些比如样式文件、图片资源文件

dist 是经过ts编译后的js文件

src当然就是源码文件了

src/index.tsx 是组件主要的代码

import React, { ReactNode } from "react";
import info from "../assets/info.svg";
import close from "../assets/close.svg";
import "../assets/index.css";

export type TipsBannerProps = {
  children: ReactNode;
  onClose?: () => void;
};

/** 横幅形式的消息提醒 */
export default function TipsBanner({ children, onClose }: TipsBannerProps) {
  return (
    <div className="rc-tips-banner">
      <img src={info} alt="" />
      <div className="rc-tips-banner-content">{children}</div>
      {!!onClose && <img className="rc-tips-banner-close" src={close} alt="" onClick={onClose} />}
    </div>
  );
}

这里引用了两个svg图片，可在源码中找到

css使用的是less，这里推荐一个vscode扩展 Easy LESS

用于实时编译less成css

这里组件的css使用的是scope方式，方便于外部修改

到这里组件基本可以使用了，我们再写个示例example.tsx测试一下

import TipsBanner from "./index";

export default function App() {
  return <TipsBanner onClose={() => console.log("close.")}>please do not defecate in public.</TipsBanner>;
}

由于咱们使用的是ts，需要编译成js才方便给更多人引用

注意tsconfig.json的配置，该配置文件可以使用 tsc --init生成

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "rootDir": "./src",
    "outDir": "./dist",
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

然后执行tsc编译，就可以引用dist下面的index.js了

到这里组件基本完成了，然后可以写一个README.md文档，主要是组件效果和使用说明等

最后使用 npm publish 发布npm包，这样一个小组件就算完成了

具体代码可查看源码