58金融前端脚手架的设计与实现 _前端

导读
17年初，金融前端项目开始逐步大规模转向react技术栈。在完整经过第一个react项目的搭建、开发、上线后，积累了react项目运行必要的配置、使用方式、最佳实践等，这些为后续项目的迁移提供了参考。

背景
起初团队内新的react项目的搭建都是通过手动拷贝其他项目完成的，例如需要拷贝webpack配置、代码基本结构、组织方式、package.json等。这样虽然可以创建新的项目，但容易出现以下问题：

人工操作，在拷贝的过程中容易出现遗漏或者是误修改；
开发人员既需要进行业务开发，也需要关注项目的配置，增加了开发成本；
不同项目有自己定制的部分，团队人员之间接手项目也需要熟悉一遍配置流程，无法迅速的进入业务开发；
项目基础包不同，开发人员需要频繁切换环境，增加了迁移成本。

为了解决以上痛点，迫切需要推出两个工具：
一个自动化创建项目的工具，一键生成需要的项目模版，免去开发人员在项目之间来回拷贝；
一个通用打包脚本，将项目配置这种与业务无关的逻辑提取出一个通用npm包，使用时安装即可，开发同学可以无需关注配置细节、打包细节即可快速运行项目。

前期准备
为了开发出更贴合团队需求的工具，需要从以下几个方面考虑：
1、根据团队现有的项目类型，划分不同的项目模版，为开发项目脚手架作准备，提升开发效率、质量

确定项目类型

开发脚手架的第一步就是要明确需要支持哪些项目，因为我们做的是多个不同的项目集合，需要充分了解团队内的项目结构，合理划分。如m端项目、pc项目，这两个方向的项目可以分别划分为两个模版，因为不同平台的页面需要的基础库不同、开发结构也不同；

项目模版的可扩展性。需要考虑后续可能会增加多种项目模版，方便模版的扩展；
技术栈基础库版本统一，如react、react-router 。合理约束基础库的版本，降低项目迁移时的人员学习成本。

2、提取项目通用配置，高度抽象不同项目间的配置差异，为开发打包脚本做准备，提升开发体验

统一项目打包基础库，如webpack、babel
提供个性化配置入口以满足不同业务需求
方便接入，项目运行零配置
与部署平台低耦合，可以快速对接集团以及金融内部的部署平台。

架构及实现
脚手架
提到脚手架，我们自然想到了yeoman生态系统。Yeoman是一个帮助开发者快速创建新项目的工具，通过开发yeoman的插件，即可在终端上使用 yo + 插件名命令为用户生产文件。

可以实现如下功能：

根据用户的输入选择对应的模版文件
拷贝模版文件到目标目录
安装依赖

因此，分离项目中的业务代码，最终提供可以运行起来的项目模版便成了首要开发目标。
该脚手架创建至今，已由最初的几个react项目模版增加了多个项目，如 node项目、小程序项目等。不仅仅是项目模版，除此之外每个项目内都包含了基础开发的最佳实践，以供开发同学参考。
其中， react相关的项目和组件都分别内置了我们的earth-scripts和earth-components-scripts打包脚本（后面会详细介绍），为项目提供统一的开发、打包配置。

文章插图

脚手架生成项目流程
实现过程
开发者可以继承yeoman-generator ，通过实现提供的生命周期钩子函数，来实现自己的插件。

文章插图

接下来会详细介绍react项目打包脚本（earth-scripts）的实现方式。(earth-components-scripts与项目打包脚本类似，这里不再赘述)
react项目打包脚本
由于团队内使用react项目开发、打包的配置大同小异，在第一个react项目成功上线后，将其配置抽取出npm包。在充分了解团队内多个项目之间的差异及配置需求后，封装通用逻辑，并开放部分配置以满足项目定制化需求。