整一个组件库系列（零）项目搭建（白嫖计划）

基于React的移动端、渐进式增强组件库。@one-component/component

心血来潮，想要搞一个组件库，真不是闲的无聊。最终需求是：

1. 支持webpack tree sharking[渐进式]
2. 支持暗夜模式 [渐进式]
3. 多主题色切换 [渐进式]

使用渐进式增强这个思想来实现（换句话说就是不兼容低版本，低版本只能保证可用），而且我们打算不用一分钱来实现这个目标。

准备资源

准备好GitHub组织和npm组织，因为这两个地方还可以起个好名字（免费）。

GitHub 组织

新建组织

新建组织 -> 选择免费计划 -> 整个好名字 -> 创建

设置组织Action Secret（自动化发布）

给新建的组织设置下Action Secret，自动化发布npm包时会使用到。

1. 生成NPM Access Tokens 复制备用

2. 设置

打开组织 -> 设置 -> Secrets -> 新建组织secrets -> 设置NPM_TOKEN

npm 组织

新建组织 -> 整个好名字（和GitHub组织一样） -> 创建

项目初始化

项目

在GitHub上初始化项目，完成后down到本地。

dumi

dumi为组件开发场景而生的文档工具

1. 用dumi初始化项目

$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架

初始化后大概长👇这样

2. 安装移动端主题dumi-theme-mobile

$ npm i dumi-theme-mobile -D # 安装移动端主题

装完之后就可以有移动端demo啦，大概长👇这样。

3. 装上一些需要的依赖

# 代码风格、commit规范、prettier代码格式化
$ npm i @one-style/commit @one-style/eslint @one-style/prettier -D

# 测试库
$ npm i @types/react-test-renderer @types/jest react-test-renderer -D

4. 配置一下tsconfig.json tsconfig.json 将jest的类型添加进去，后续写测试代码有提示

{
  compilerOptions: {
    "types": ["@types/jest"],
  }
}

5. 修改package.json，组件库名字，参考实现

6. 修改.fatherrc.ts

export default {
  esm: 'rollup',
  cjs: process.env.NODE_ENV === 'production' ? 'rollup' : false,
}

7. 修改.umirc.ts

按自己需求修改。

hello world

1. 简简单单写个组件

import React from 'react'

export const Title: React.FC<{ title: React.ReactNode }> = (props) => <h1>{props.title}</h1>

2. 简简单单写个组件文档

3. 写下组件测试

import React from 'react'
import renderer from 'react-test-renderer'
import { Title } from './index'

test('Title render', () => {
  const t = 'Foo render'
  const c = renderer.create(<Title title={t} />)
  const tree = c.toJSON()
  expect(tree).toMatchSnapshot()
})

支持webpack tree sharking

很简单，只需要在package.json里面添加上sideEffects字段，关于这个字段具体描述请参考 webpack tree sharking 文档。

// package.json
{
  "sideEffects": [
    "*.less",
    "*.css"
  ]
}

自动化

github action -> 新建action -> 写下代码

具体配置参考

配置好后发布完成 打开项目setting -> GitHub Pages -> 选择部署文档的分支

太长不看

1. clone 项目

$ git clone --depth 1 -b feat/init_project https://github.com/one-component/component.git

2. 删除.git

$ rm -rf .git

3. 重新初始化

$ git init

发布v0.0.1

1. 修改版本号

$ npm run release

2. 推送到远端 + tag 推送

$ git push --tags

3. 发挂了 解决问题 删掉tag 再重复1-2

链接

项目地址 github.com/one-compone…

文档地址 one-component.github.io/component/