打造前端团队的 React CLI 工具

关于前端 CLI 工具

• 对于 Angular，有官方的 Angular CLI。
• 对于 Vue，有官方的 Vue CLI。
• 对于 React，有官方的 Create React App。

Angular CLI 和 Vue CLI 是官方推荐的 CLI 工具，可直接在生产环境中使用，但 Create React App 的定位却有点不一样，它的目标是让你快速 Set up 一个 React 应用，若是你要在生产环境中使用，由于它的可定制性并很差，你可能要 eject，而后手动维护 webpack 配置。

咱们团队的历程

首先说背景，这几年以来，我所在的团队使用的都是 React 技术栈，咱们的业务属性是要频繁建立新项目的，但业务的生命周期并不必定短，也多是长期的。

最开始，应该该是三四年前左右，那时的解决方案比较原始，每一个人维护本身的 webpack 配置，有新项目就 copy and paste。这样的优势是灵活，本人对本身项目的配置可控性，缺点是配置升级和维护都不容易，项目交接后问题多。

后来，咱们使用项目 Boilerplate 的方式，团队内维护一份 Boilerplate，全部新项目都使用这个 Boilerplate 初始化。这样的优势是 webpack 配置统一化，易于多人合做，缺点是配置升级不容易，由于 webpack 配置是暴露在项目中的，配置会被人修改，很容易脏掉。

再后来，官方出了 Create React App。发现原来 webpack 配置能够不暴露在项目中，能够隐藏在 node_modules 中，这是一种很是优雅的解决方案。因此咱们使用了和 Create React App 相似的解决方案，建立本身团队专属的前端 CLI 工具，这也是咱们当前的解决方案。这样的优势是 webpack 配置被隐藏，项目目录比较干净，webpack 配置升级容易，只需升级 CLI，缺点是维护 CLI 是一个大工程，须要较多的人力，且须要踩很是多的坑。

我推荐的方案

回到文章的标题：打造前端团队 React CLI 工具，我认为每一个前端团队都应该有本身的 CLI 工具，这是一个团队技术和经验沉淀的重要根据地。

CLI 工具能够承担很是多的工做，好比初始化项目、开发、测试、打包、部署、组件开发等，换一句话说，CLI 工具能够参与到研发的整个生命周期中，因此它是团队技术和经验沉淀的重要根据地。

这里重点要讲的是 CLI 所承担的脚手架功能，Create React App 很是优秀，但我不建议做为团队工具直接使用，我也不建议从零开始去实现一个 Create React App（特别是一个中小前端团队），个人建议是基于 Create React App 建立，为何呢？由于 Create React App 足够稳定，出现问题的几率小，站在巨人肩膀上，你能够省不少精力，把更多的精力投入到业务问题中。

基于 Create React App 建立 CLI

下面是一个我基于 Create React App 建立的 CLI：

安装:

npm i -g pea-cli

初始化项目：

pea create myapp

项目目录:

.
├── README.md
├── package.json
├── pages
│   └── index.tsx
└── tsconfig.json

启动开发服务器：

cd myapp
npm run start

原理是很是简单，其实就是对 Create React App 定制化，让它成为适合你团队的工具，但你工具是紧跟 React 社区的，拥有很好的稳定性。

有兴趣了解细节的能够看 https://github.com/pea-team/pea-cli