前言：前面文章讲了如何新建基本组件库架构，我们在写组件之前就要思考，组件给别人使用的时候需要一份说明文档，类似Antd那种，今天就来分享组件库如何加入文档
此篇文章采用create-react-app为例子，由于刚升级了node为16的版本，create-react-app生成的项目react和react-dom为18.2的版本，后续会提及这个
首先看一下组件库的最终效果：
1.构建初始化项目
npx create-react-app myapp --typescript
2.配置 eslint 进行格式化
由于安装最新的 create-react-app 结合 VScode 编辑器即可支持 eslit，但是需要在项目根目录中要添加 .env 这个配置文件，设置 EXTEND_ESLINT=true
3.构建目录
如图所示：
4.安装 node-sass 处理器
安装 node-sass 用来编译 SCSS 样式文件：npm i node-sass -D
这样最基本的 react 开发环境就完成了，可以开发组件了。
5.组件库编译打包
我们用的 TypeScript 编写的代码，所以使用 Typescript 来编译项目：
首先在每个组件中新建index.tsx文件：
//buttom.tsx
import React from 'react'
function button() {
return (
<div>button</div>
)
}
export default button
//index.tsx
import Button from './button'
export default Button
在根目录的index.tsx中插入代码
export { default as Button } from './components/Button'
在根目录新建 tsconfig.build.json，对 .tsx 文件进行编译：
{
"compilerOptions": {
"outDir": "dist", // 生成目录
"module": "esnext", // 格式
"target": "es5", // 版本
"declaration": true, // 为每一个 ts 文件生成 .d.ts 文件
"jsx": "react",
"moduleResolution": "Node", // 规定寻找引入文件的路径为 node 标准
"allowSyntheticDefaultImports": true
},
"include": [
// 要编译哪些文件
"src"
],
"exclude": [
// 排除不需要编译的文件
"src/**/*.test.tsx",
"src/**/*.stories.tsx",
"src/setupTests.ts"
]
}
在package.json中加入代码，把sass文件打包成css文件
"script":{
"build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
}
新增打包代码
"script":{
"clean": "rimraf ./dist",// 跨平台的兼容
"build": "npm run clean && npm run build-ts && npm run build-css",
}
执行 npm run build 之后，就可以生成对应的组件 JS 和 CSS 文件，为后面使用者按需加载和部署到 npm 上提供准备。
- 本地调试
本地完成组件库的开发之后，在发布到 npm 前，需要先在本地调试，避免带着问题上传到 npm 上。这时就需要使用 npm link
假设组件库是 feature_bower（个人项目举例） 文件夹，要在本地的 demo 项目中使用组件。则在组件库中（要被 link 的地方）执行 npm link，则生成从本机的 node_modules/feature_bower 到 组件库的路径 / feature_bower 中的映射关系。 然后在要使用组件库的文件夹 demo 中执行 npm link feature_bower
需要修改组件库的 package.json 文件来设置入口：
{
"name": "feature_bower",
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
}
然后在要使用组件的 demo 项目的依赖中添加：
"dependencies":{
"feature_bower":"0.0.1"
}
执行npm run start启动可以看到引入的组件 当出现这样就证明组件库引用成功了
7.上传到npm，这一步骤就不再详细说明，在上一章中已经详细说明。上传npm 成功后就可以通过npm install 引入，devDependencies里的配置就不过多解释了，在上一章也说明了
8.在项目里加入文档
在这有2个选择 一个是docz另外一个是storybook，本身是要选择docz的 它的风格接近antd，
但是本文选择的是storybook，文章开头说过在当前项目是18.2的版本，docz最新会存在着版本问题，我尝试过修复其中的问题，docz的所有者说将会在下一个版本修复，最新的docz在16.8以上的版本都会正常运行 这里就不过多解释了
根据storybook文档 storybook.js.org/docs/react/…
在我们的组件项目中执行
npx storybook init
安装完成后 package.json 会有如图所示
{
"name": "feature_power",
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"clean": "rimraf ./dist",
"build-ts": "tsc -p tsconfig.build.json --target ES5 --outDir dist",
"build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
"build": "npm run clean && npm run build-ts && npm run build-css",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"peerDependencies": {
"react": ">=18.2.0",
"react-dom": ">=18.2.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.18.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",
"babel-loader": "^8.2.5",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
执行 npm run storybook
这样就是成功了。 同时项目里出现了这样的一个文件夹
这些是storybook的初始化文件，我们要做的就是和他类似的写法，由于时间紧急我会在后续更新这篇文章
