HrKit（Hezebin React 组件库）

一些常用的组件、工具函数、常量等，使用 Rollup 编译打包、Vite 开发测试、DUmi 生成文档。

0.开发规范

安装 eslint、prettier、editor 来规范代码风格：

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint \
eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-import eslint-plugin-unused-imports eslint-import-resolver-typescript

1.入口文件统一导出组件

在 src/index.ts 入口文件中将编写好的全部组件统一抛出，如：

export { default as Test } from './components/test/index'
export { SSO_HOST, ENTRY_HOST } from './constant/host/index'

2.安装 Rollup

构建打包组件使用 Rollup 和其生态下的常用组件

yarn add -D rollup
# 配置文件支持 ts
yarn add -D @rollup/plugin-typescript
# 打包压缩插件
yarn add -D @rollup/plugin-terser
# 解析图片, 支持导入 JPG, PNG, GIF, SVG, 和 WebP 文件
yarn add -D @rollup/plugin-image
# 不同于 @rollup/plugin-image 只能生成内联 data URI 形式，它在生成内联 data URI 和生成单独的文件之间自动选择
yarn add -D @rollup/plugin-url
# json 解析插件
yarn add -D @rollup/plugin-json
# 外部依赖查找插件
yarn add -D @rollup/plugin-node-resolve
# css 相关解析
yarn add -D rollup-plugin-postcss
# commonjs 转化为 es5, 需要在其他类似工具前面，避免破坏对CommonJS的检测
yarn add -D @rollup/plugin-commonjs
# 自动将外部类库声明为 externals，包含 dependencies, devDependencies, peerDependencies, optionalDependencies及NodeJS内置模块
yarn add -D rollup-plugin-node-externals
# babel 处理, 将 es6/es7 代码编译转换为 es5
yarn add -D @rollup/plugin-babel @babel/core @babel/preset-env @babel/preset-react
# 打包前清除旧资源
yarn add -D rollup-plugin-clear

yarn add -D rollup @rollup/plugin-typescript @rollup/plugin-terser @rollup/plugin-image @rollup/plugin-url @rollup/plugin-json @rollup/plugin-node-resolve rollup-plugin-postcss @rollup/plugin-commonjs rollup-plugin-node-externals @rollup/plugin-babel @babel/core @babel/preset-env @babel/preset-react rollup-plugin-clear

在项目根目录下创建一个名为 rollup.config.mjs 的配置文件，配置参考： https://cn.rollupjs.org/configuration-options

3.配置 package.json 文件：

添加一个名为 build 的脚本，并配置要发布的组件包的基础信息：

name: 包名称

• version: 包版本
• main: 包的入口文件
• module: 模块入口文件
• exports: 在不同引入模式下的导出方式
• files: 上传到 npm 包含的文件列表
• types: 类型声明入口文件
• scripts: 脚本

{
  "name": "hrkit",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/index.umd.js",
  "module": "dist/index.es.js",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js"
    }
  },
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "docs:dev": "dumi dev",
    "docs:build": "dumi build",
    "build": "rollup -c rollup.config.mjs",
  }
}

4.开发测试

开发组件时，可在 dev 目录下的 index.tsx 中引入组件，验证预览和调试组件：

yarn dev

开发模式使用 Vite 脚手架，能够拥有及其快速地热更新体验。

5.编写文档

组件文档使用 Dumi，扫描 docs 和 src 下的所有 md 文档，语法参考：https://v1.d.umijs.org/zh-CN/config/frontmatter

文档编写后执行预览文档：

yarn docs:dev

编译文档：

yarn docs:build

6.编译打包组件

运行 yarn build 命令来执行打包。如果一切顺利，将在项目根目录下创建一个名为 dist 的文件夹，并在其中包含一个名为 bundle.js 的文件。

7.本地调试链接该组件包

1.在该发布组件包的项目根目录中执行

yarn link

控制台会输出 package.json 中的 name；

2.在本地其他想要使用该组件的项目中链接上面的本地包名

yarn link @hezebin/hrkit

然后就可以在项目中直接使用该包了。

8.将组件发布到npm

1.切换npm源为官方:

yrm use npm

npm config set registry https://registry.npmjs.org

2.登录

npm login

# Username: ihezebin
# Email: [email protected]

3.发布

npm publish --access public

4.发布结束后切回淘宝源

yrm use taobao

npm config set registry https://registry.npm.taobao.org

9.安装使用组件

yarn add @hezebin/hrkit

• 使用SDK

import {Test} from '@hezebin/hrkit'

    ;

<Test></Test>