基于 React、TS的聊天室monorepo实战

最近在思考如何编写高质量的 React 项目，刚好接到聊天室的需求，于是决定写一篇关于 React、TS 的实战教程，采用 monorepo+lerna 管理包。如何关注代码质量与规范的同时，快速实现需求。

接下来，带着大家快速开发一个 Web 版聊天室。

文末抽奖包邮送4本《Vue.js前端开发基础与项目实战》

PS：该教程面向有一定 React、TS 、Node 经验的前端开发者，通过学习您将获得：

• UI 组件库搭建

• Lerna + monorepo 的开发模式

• 基于 React hook 的状态管理

• socket.io 在客户端和服务端的应用

目标

---

实现多人在线聊天，可发送文本、表情、图片。

接着来看下我们要实现的页面长什么样子：

开发计划与项目初始化

---

通过需求分析后，制定如下开发计划：

基础配置

基础配置是通过自研脚手架快速搭建的，其中包括：

1. 添加 eslint、prettier、husky 用于代码规范、git 提交规范

2. 添加 Lerna 配置，yarn workspaces

3. 在 packages 目录建立 @im/component、@im/app、@im/server 包

这里说明下，个人习惯在用 TS 时，将 prettier 的 printWidth 设置为 120 (标准是 80)。目的是，能用一行代码表达的，绝不用两行，代码格式化造成的也不行。

接着分别介绍每个包的具体细节