浅谈前端研发链路之脚手架

本文首发同名公众号：前端徐徐

大家好，我是徐徐。今天我们来聊聊前端研发链路中的脚手架。

前言

在前端开发中，研发链路的流畅与高效直接关系到项目的成败。一个好的研发链路不仅能提升开发效率，还能确保代码质量和项目的一致性。而在这个链路中，脚手架工具扮演着至关重要的角色，它能帮助开发者快速搭建项目结构，简化复杂的配置，甚至提供最佳实践的指导。

我们几乎每个项目都会用到脚手架这个玩意，但是很多时候就停留在使用的层面，没有去了解它的整个面貌，这篇文章就带你了解一下脚手架的方方面面。

什么是脚手架

脚手架，顾名思义，是搭建在建设中的建筑外部的临时结构，在前端开发中，脚手架工具同样是一种辅助工具。它能帮助开发者快速初始化项目，生成必要的文件和目录结构，配置开发环境。

脚手架工具在前端开发中已经成为不可或缺的一部分，尤其是在项目初期，它能大大减少重复劳动，让开发者专注于业务逻辑的实现。

脚手架的发展历史

可以大概看一下前端构建的发展历史，大概如下图所示。

从上面这张图不仅仅展示了前端构建的发展使，也可以展现出前端脚手架工具的历史的演变。

• 早期的 Web 开发

在 Web 开发的早期阶段，开发者通常手动创建和配置项目。由于没有标准化的工具，每个项目的配置和结构都不一样，这导致了开发效率低下和代码不一致的问题。

• 脚手架的雏形

在Node构建的时代就有脚手架的雏形了，开发者们会写一些自定义脚本去初始化一个项目，只是当时npm的生态还不够繁荣，没办法工程化的去做一些事情。

• 脚手架工具的诞生

随着 Web 应用的复杂性增加，开发者开始寻求更高效的解决方案。于是，脚手架工具应运而生。最早的脚手架工具之一是 Yeoman，它通过生成器帮助开发者快速创建项目结构并自动配置开发环境。

• 现代脚手架工具

随着 JavaScript 框架和库的发展，针对特定框架的脚手架工具也逐渐出现。例如，Create React App、Vue CLI 和 Angular CLI。这些工具不仅简化了项目初始化，还提供了一系列开发工具和最佳实践，极大地提升了开发效率。

脚手架的工作原理