前端工程化-打造企业通用脚手架

 

本文字数：10930字

预计阅读时间：28分钟

前端工程化-打造企业通用脚手架

目录

• 前言

• 脚手架是什么？

  • 脚手架能力

  • 为什么不用自动化构建工具

  • 脚手架核心价值

• 使用脚手架

• @focus/cli架构

  • 依赖项概览

  • focus create projectName核心流程

    · 核心代码实现

    · 小结

  • focus add material核心流程

    · 核心代码实现

    · 小结

  • 通用能力

• 总结

前言

随着前端工程化的概念越来越深入FEer心，前端开发过程的技术选型、代码规范、构建发布等流程的规范化、标准化是需要工具来保驾护航的，而不是每次都对重复工作进行手动复制粘贴。脚手架则可作为工程化的辅助工具，从很大程度上为前端研发提效。

脚手架是什么？

那脚手架是什么呢？

在以往工作中，我们可能需要先做如下操作才能开始编写业务代码：

• 技术选型

• 初始化项目，选择包管理工具，安装依赖

• 编写基础配置项

• 配置本地服务，启动项目

• 开始编码

随着Vue/React的兴起，我们可以借助官方提供的脚手架vue-cli或create-react-app在命令行中通过选择或输入来按我们的要求和喜好快速生成项目。它们能让我们专注于代码，而不是构建工具。

脚手架能力

但是这些脚手架是针对于具体语言（Vue/React）的，而在我们实际工作中不同BU针对不同端（PC、Wap、小程序...）所采用的技术栈也可能不同，往往特定端采用的技术栈在一定程度上都可以复用的到其他类似项目中。我们更期望能在命令行通过几个命令和选择、输入构建出不同端不同技术栈的项目。

上述只是新建项目的例子，前端开发过程中不止于此，一般有如下场景：

• 创建项目+集成通用代码。项目模板中包含大量通用代码，比如通用工具方法、通用样式、通用请求库处理HTTP请求、内部组件库、埋点监控...

• Git操作。一般需要手动在Gitlab中创建仓库、解决代码冲突、远程代码同步、创建版本、发布打Tag...等操作。

• CICD。业务代码编写完成后，还需要对其进行构建打包、上传服务器、域名绑定、区分测试正式环境、支持回滚...等持续集成、持续部署操作。

为什么不用自动化构建工具

一般情况下，我们会采用Jenkins、Gitlab CI、Webhooks等进行自动化构建，为什么还需要脚手架？

因为这些自动化构建工具都是在服务端执行的，在云端就无法覆盖研发同学本地的功能，比如上述创建项目、本地Git操作等；并且这些自动化工具定制过程需要开发插件，前端同学对语言和实现需要一定学习和时间成本，前端同学也更期望只使用JavaScript就能实现这些功能。

脚手架核心价值

综上，前端脚手架存在意义重大。脚手架的核心目标是提升前端研发整个流程的效能。

• 自动化。避免项目重复代码拷贝删改的场景；将项目周期内的Git操作自动化。

• 标准化。快速根据模板创建项目；提供CICD能力。

• 数据化。通过对脚手架自身埋点统计，将耗时量化，形成直观对比。

往往各个公司对于自动化和标准化的部分功能Git操作、CICD都有实现一套完善的类似于代码发布管理系统，帮助我们在Gitlab上管理项目，并提供持续集成、持续部署的能力。更有甚者，针对小程序的项目也会对其进行代码发布管理，将其规范化。

我们可能就只需要考虑

• 创建项目+集成通用代码

• 常见痛点的解决方案（快速生成页面并配置路由...）

• 配置（eslint、tsconfig、prettier...）

• 提效工具（拷贝各种文件）

• 插件（解决webpack构建流程中的某个问题...）

• ...

下面则介绍我们在公司内部基于这些场景所做的尝试。

使用脚手架

首先在终端通过focus create projectName命令新建一个项目。其中focus表示主命令，create表示command，projectName表示command的param。然后根据终端交互去选择和输入最终生成项目。

我们为各个BU、各个端、各个技术栈提供不同模板项目，于此同时，每个同学都能将小组内的项目沉淀并提炼成一个模板项目，并按一定规范集成到脚手架中，反哺整个BU。

@focus/cli架构

如下架构图，采用Ler