--- theme: channing-cyan --- ## 前言开发一个组件库并供外部或者内部使用，是一个很普遍的需求，许多人通常在搭建中耗费了大量时间，本文将从0到1搭建一个包括 ``文档``、 ``自动化部署``、 ``单元测试``、 ``开发环境``、十分全面的组件库开发模板，如果你想快速的拉取一个模板，本模板已经发布为脚手架模板，你可以通过如下参数快速拉取: ``` npm create dino --template=react-component-library ``` 本文github地址: [react-component-library-template](https://github.com/yucccc/react-component-library-template) ## 初始化我们创建一个项目并进入该文件进行初始化 ```bash mkdir react-component-library && cd react-component-library ``` 我们创建了一个名为 ``react-component-library`` 的文件夹并进入其中，接下来我们进行初始化 ```bash npm init ``` ## 安装所需依赖组件库最好都是通过typescript开发，以便友好的提示输入输出，我们安装相关依赖 ```bash npm install react @types/react react-dom typescript -D ``` 安装完毕后可见如下字段，我们的React版本为最新版18.x ```json "devDependencies": { "@types/react": "^18.0.24", "react": "^18.2.0", "typescript": "^4.8.4", "react-dom": "^18.2.0" } ``` ## 创建基础开发目录 ```markdown . ├── src │ ├── components | │ ├── Button | | │ ├── Button.tsx // 组件的核心逻辑 | | │ └── index.ts // 统一导出组件 | │ └── index.ts // 导出所有组件 │ └── index.ts // 外部引用的入口 ├── package.json └── package-lock.json ``` 我们创建出如上的基础开发目录结构，接下来便开始着手写代码. ``src/components/Button/Button.tsx`` ```typescript import React from "react"; export interface ButtonProps { label: string; } export const Button = (props: ButtonProps) => { return ; }; ``` 为了保持项目初期简化，只创建了一个基础按钮组件，并默认导出修改 `src/components/Button/index.ts` ```typescript export * from "./Button"; ``` 然后，我们从组件目录导出该按钮：修改 ``src/components/index.ts`` ```typescript export * from "./Button"; ``` 最后，我们从基本src目录导出所有组件： `src/index.ts` ```typescript export * from './components'; ``` ## 启动项目到现在为止，我们还未正式启动项目，但请别着急，我们将使用storybook来开发以及调试我们的应用，最终也将其发布为在线文档可供用户访问。为什么使用[storybook](https://storybook.js.org/docs/react/get-started/install)而不是其他 ? storybook友好且维护积极并且开箱即用，新手最忌讳的是使用一些过新或者维护不及时的工具，且不应该把时间浪费在选型以及踩坑上面，因此我们选择了storybook ```shell npx storybook init --builder vite ``` 安装过程可以有点缓慢，需要耐心等待一下，如出现以下错误，请查看该[解决办法](https://stackoverflow.com/questions/60573595/npm-install-fails-on-node-gyp-rebuild-with-gyp-no-xcode-or-clt-version-detec)*也可忽略* : ``` gyp: No Xcode or CLT version detected! ``` 安装完毕后，我们需要再安装vite: ```bash npm install vite -D ``` 接着运行项目: ```bash npm run storybook ``` *注: 如果运行出错，我们需要重新 npm install 即可 * ![Pasted image 20221031171502的副本.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f495cb5cee54158bcece89e03a3ca77~tplv-k3u1fbpfcp-watermark.image?) 可以看到项目已经成功运行，默认启动在`6006`端口，但是我们发现左侧的Button组件并不是我们最初编写的，而是他自动生成了一个，接下来我们着手修改: 新增 `src/components/Button/Button.stories.tsx` 并输入: ```typescript import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { title: '通用/Button', component: Button, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { backgroundColor: { control: 'color' }, }, } as ComponentMeta; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Template: ComponentStory = (args) =>

Edit src/App.tsx and save to reload.

Learn React ); } export default App; ``` 可以看到页面正常显示了: ![Pasted image 20221101103707.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/efb28146da4347f3953989ff2f1a5f65~tplv-k3u1fbpfcp-watermark.image?) 你可能看到的按钮样式不一样，是作者偷偷给他加了一点点漂亮的样式，不影响接下去的工作. ## 发布到npm 发布到npm实际上很简单，市面上也需要教程，咱们这里简单发布一下 ``` npm login ``` 然后发布 ``` npm publish ``` *注意: 我们只要发布dist文件夹就行，检查一下package.json的files字段是否正确哦* ## 增加发布日志 ![Pasted image 20221101104724.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9908a53cc10b4d62b93ccafaba3fb308~tplv-k3u1fbpfcp-watermark.image?) 这是ant-design的版本日志，我们也想拥有怎么办？其实不难，我们新建如下目录结构，利用cicd来帮我们完成. ```markdown . ├── .github │ ├── workflows | │ ├── release.yml ``` 我们使用[changelogithub](https://github.com/antfu/changelogithub)一键搞定 `release.yml` ```yml name: Release on: push: tags: - 'v*' jobs: release: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 with: fetch-depth: 0 - uses: actions/setup-node@v3 with: node-version: 16.x - run: npx changelogithub env: GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} ``` 意思为：当我们发布一个以v开头的tag的时候，帮我自动生成changelog. ## 提交到github 需要先将提交到github，注意提交前需要`创建.gitignore`并写上对应的忽略文件. 假设你已经提交到github完毕，接下来我们创建一个tag，我们可以使用任意工具来创建一个tag, 这里我为了演示，将使用git命令行: ``` git tag -a v0.0.8 -m "release v0.0.8" ``` 创建了一个命名为v0.0.8的tag 提交信息为 "release v0.0.8" 推送到远程master分支 ``` git push origin master --tags ``` ![Pasted image 20221101110337.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fb8058ff31e4eed8f94692093956f8a~tplv-k3u1fbpfcp-watermark.image?) 可以看到ci正在运行，执行完毕我们打开tag看看 ![Pasted image 20221101110616.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6648af40a62042bd83eb03560596dc69~tplv-k3u1fbpfcp-watermark.image?) 期间我们提交的commit都将作为changelog输出，非常友好. ![Pasted image 20221101110635.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fc2410786344ea69a6da1e4ccec7974~tplv-k3u1fbpfcp-watermark.image?) ## 部署文档到这里，其实我们的工作已经完成，但是文档供用户访问必不可少，我们利用GitPage来部署我们的文档，[storybook部署文档](https://storybook.js.org/docs/react/sharing/publish-storybook) ### 测试打包后文档是否正常访问 ``` npm run build-storybook ``` 默认会打包到storybook-static文件夹下 ``` npx http-server storybook-static ``` 访问 http://127.0.0.1:8080 查看是否正常，当前默认开启的端口是8080，后续可能因为http-server更新而改动，需要根据实际提示进行访问。 ### 配置GitPage 增加一个ci文件 `.github/workflows/storybook.yml` ```yml name: Storybook on: push: branches: - main # if any push happens on branch `main`, run this workflow. You could also add `paths` to detect changes in specific folder jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2.3.1 - name: Install and Build run: | npm ci npm run build-storybook - name: Deploy uses: JamesIves/github-pages-deploy-action@3.6.2 with: branch: gh-pages folder: storybook-static # npm run build-storybook输出的文件夹 ``` 提交代码可以看到正在运行ci 此时已经两个任务，执行完毕后我们可以看到多出了一个`gh-pages`分支, 进入设置: ![Pasted image 20221101115037.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac8950abe6c94a9dab44c87e986e5e22~tplv-k3u1fbpfcp-watermark.image?) 可以看到页面显示了: ![Pasted image 20221101120741.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8daa5a624e6b4709aad6091fcbfe1529~tplv-k3u1fbpfcp-watermark.image?) 但是按钮并未渲染出来，检查资源发现 iframe.js 404了，果然，我本地没问题，怎么上线就出了问题呢？原因我们大致已经猜到了，资源路径错误，我们修改下打包资源路径访问问题 `.storybook/main.js` ```javascript module.exports = { "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions" ], "framework": "@storybook/react", "core": { "builder": "@storybook/builder-vite" }, // +++++ 新增 ++++ async viteFinal(config) { config.base = '/react-component-library-template/' return config }, "features": { "storyStoreV7": true } } ``` *📢注意: base的路径为你github仓库的路径，本文中github仓库项目名为 react-component-library-template* 再次访问，已经正常显示. ## 最后本文已经完成自动发布，changelog，文档访问，发布下载等，已经能满足日常需求，后续将更新jest等其他细节需求，感谢你阅读到最后.