简介

使用father、dumi、pnpm技术栈的React组件单一仓库模板。

使用

安装依赖

在根目录执行会自动安装所有项目的依赖包。

pnpm install

清理所有依赖

pnpm clean

清理所有依赖并重新安装

pnpm reinstall

启动文档项目

文档项目有两个作用：

1. 介绍组件的使用方法
2. 组件的功能演示

pnpm start

开发

添加包

在这个模板中新添加一个包，操作流程如下，已创建liba为例：

cd .\packages\
mkdir liba
cd liba
pnpm dlx create-father ./ 

# 根据提示选择或输入你的信息。
# √ Pick target platform(s) » Browser
# √ Pick NPM client » pnpm
# √ Input NPM package name ... liba
# √ Input NPM package description ...
# √ Input NPM package author (Name <[email protected]>) ...

包目录创建好后，添加react组件之前要对项目参数做一些简单的配置。

在.\packages\liba\tsconfig.json，的compilerOptions中增加jsx、esModuleInterop、sourceMap三项参数。

{
  "compilerOptions": {
    "strict": true,
    "declaration": true,
    "skipLibCheck": true,
    "baseUrl": "./",
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true
  }
}

然后添加你要开发的组件依赖包

# 添加依赖包react
pnpm add react

添加组件文件.\packages\liba\src\Button.tsx

// .\packages\liba\src\Button.tsx

import React from "react";

export default ()=>{
    return(<button>From lib a</button>)
}

导出组件

// .\packages\liba\src\index.ts

export {default as ButtonA}  from "./Button"

生成

cd .\packages\liba
pnpm build

生成成功后会在.\packages\liba\dist\esm中看到结果。

在文档中展示组件

前面已经创建好了包liba，并创建了组件ButtonA，下面在文档中展示这个组件。

在.\packages\docs包中，添加liba的应用。

// .\packages\docs\package.json
 "dependencies": {
    // 添加liba的依赖，注意版本号的写法。
    "liba": "workspace:^1.0.0"
    // ... 其它依赖
 }

在创建.\packages\docs\src\libA的目录，并新建展示文档index.md。

# .\packages\docs\src\libA\index.md
---
nav:
  title: Components
  path: /components
---

## Libiary A

Button A:

```tsx
import React from 'react';
import {ButtonA} from "liba";

export default () => {
  return(
    <div>
    <ButtonA/>
    </div>
  )
};

```

启动文档项目就能看到liba中的组件展示了。

pnpm start

热更新

组件展示文档项目运行起来后，文档自身的修改是能够热更新的，但是引用的liba包中的组件并不能热更新，修改了组件内容后，需要在组件目录运行pnpm build才能生效。要实现组件的热更新，可以在组件包目录中使用pnpm dev来监视文件变更并自动build。

cd .\packages\liba
pnpm dev

发布

发布分为发布说明文档和组件两种情况。

发布文档

将文档发布成网站。

pnpm docs:build --filter docs

输出目录在packages\docs\docs-dist，这些文件放在web服务中就可以访问。例如使用dotnet-serve工具。

# 安装dotnet-serve
dotnet tool install --global dotnet-serve

# 启动网站
cd packages\docs\docs-dist
dotnet serve -o

发布组件

发布组件非常简单，和npm的操作流程一致。在根目录下执行pnpm publish即可。