前端类库开发最佳实践

Yarn + Lerna + Rollup + 示例项目

Yarn

通过使用 Yarn 的工作区功能，让 Yarn 根据就依赖关系帮助你分析所有子项目的公共依赖，让所有的子项目的公共依赖只会被下载和安装一次。

Lerna

通过 Lerna 可以将一系列相互耦合比较大、又相互独立的库进行管理，它解决各个库之间修改混乱、难以跟踪的问题，优化开发工作流。同时，Yarn 会帮你 link 好项目之间的依赖关系，你只需要在各个项目的 package.json 中配置好 dependencies 即可。

Rollup

使用 rollup 实现通过简单的配置，生成类库的 esm、lib 版本。

示例项目

通过示例项目展示类库的功能、使用方式。

至此，我们已经把 依赖安装 -> 库开发 -> 库发布 -> 功能介绍的整个类库的开发流程串了起来！

项目结构大致如下：

├─packages
│ ├─core
│ ├─package1
│ ├─package2
│ ├─package3
│ ├─playgorund(private)
│ └─shared
├─lerna.json
└─package.json

关于示例项目（react）

我们希望在开发的时候能时时的验证类库的各个功能，此时一个类库示例项目必不可少少。示例项目的难点在于如何引用类库项目、以及如何在类库代码更改后热更新。
首先，lerna 在项目进行 bootstrap 后会帮你把各项目的依赖 link 好；
其次，热更新，可以通过使用 webpack 的 alias 功能，将 所引用的类库指向类库的 src 本部，这样更改类库源码的时候就会热更新。

使用 cra 创建的示例项目

可使用 react-app-rewired + customize-cra 更改 webpack 配置，此时，如果 alias 超出 示例项目的 src 目录，会报错 outside of src directory 错误；此时你需要 react-app-rewire-alias 来添加 alias。使用 Yarn 工作区功能可以避免报 invalid hook call 的问题

最后，你也可以不是使用示例项目，通过使用 bookstores 的方式也是一个不错的选择。

引用

[1] Yarn
[2] Lerna
[3] Rollup
[4] Webpack
[5] react-app-rewired
[6] customize-cra
[7] react-app-rewire-alias