摘要：关于前端工具对于，有官方的。所以我们使用了和类似的解决方案，创建自己团队专属的前端工具，这也是我们当前的解决方案。我推荐的方案回到文章的标题打造前端团队工具，我认为每个前端团队都应该有自己的工具，这是一个团队技术和经验沉淀的重要根据地。
关于前端 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：
安装:
yarn global add dahlia-cli
初始化项目：
dh new myapp
项目目录:
. ├── README.md ├── package.json ├── pages │ └── index.tsx └── tsconfig.json
启动开发服务器：
cd myapp dh start
原理是非常简单，其实就是对 Create React App 定制化，让它成为适合你团队的工具，但你工具是紧跟 React 社区的，拥有很好的稳定性。
有兴趣了解细节的可以看 dahlia-cli。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104112.html
摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...
摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...
摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...
摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...
阅读 2637·2021-11-22 14:45
阅读 2950·2021-10-11 10:58
阅读 2689·2021-09-10 11:26
阅读 2789·2021-09-07 10:18
阅读 2019·2019-08-30 14:08
阅读 459·2019-08-29 12:22
阅读 1094·2019-08-27 14:19
阅读 1283·2019-08-26 13:48
