本文共 4119 字，大约阅读时间需要 13 分钟。
提到初始化项目，那就必须提到脚手架这个名词。那么为什么这篇文章的标题不是关于脚手架而是关于初始化项目呢？这背后其实有一个有趣的逻辑。
脚手架这个名词最早来源于建筑工程领域，百度百科对其的解释是“脚手架是为了保证各施工过程顺利进行而搭设的工作平台”。在软件工程领域，脚手架的含义也发生了很大变化。狭义上讲，脚手架是一个可以快速地使用配置好的工程模板初始化工程的工具，避免重复工作，为开发者提供便利。广义上讲，脚手架是一个完善的面向整个前端项目生命周期的工程解决方案，从初始化、开发调试到构建部署，都提供了一系列的工具或者规范，并且集成到一个“工具”中，开发者只需关心业务逻辑开发即可。
由于完整的工程解决方案会涉及到大量的知识点，在这里就不展开说了。本文介绍的脚手架仅是狭义上的项目初始化。
现在大多数开发者已经习惯使用 vue-cli / create-react-app 等工具来快速初始化一个项目。让我们先看看前端项目初始化的一个发展历程：
从这样一个发展历程可以看出，脚手架解决的核心问题就是——帮助开发者更方便地初始化项目。这也就是为什么需要脚手架。总结来说，脚手架最重要的作用有两点：
在完整的前端工程体系中，脚手架起到至关重要的作用。
目前，常见的脚手架底层都会依赖两种方案：使用 download-git-repo 来下载模板代码，以及使用 Yeoman 来作为脚手架的一个核心能力进行扩展。
通过这个 npm 包可以实现 git 仓库的拉取，支持 GitHub、GitLab 等。基于这个 npm 包，我们可以写一个简单的脚本来实现简易的模板下载功能。
是一个较早就出现的脚手架工具，它的第一次发布已经是在 8 年前，那时候我还没开始学习前端。很多人都说，前端技术太杂，各种技术更新太快，这句话也没什么问题，前端技术随着移动互联网的爆发也迎来了百花齐放的时代，一些技术在潮流中被后浪就拍没了。Yeoman 历经 8 年还存活着，这是为什么呢？不急，待我们剖析了 Yeoman 的原理之后，你会觉得它确实可以在现在的前端工程化中占有一席之地。
Yeoman 是一个通用的脚手架系统，允许创建任何类型的应用。将 Yeoman 放在了「常见脚手架底层方案」，是因为 Yeoman 它并不能直接初始化项目所需的文件，它是一个脚手架系统，开发者们使用 Yeoman 提供的 API 可以定制任意脚手架，完全开放、自由的，扩展性极强。
可以理解 Yeoman 提供一个插件体系，开发者可以自定开发插件来使用 Yeoman 的能力，这个“插件”在 Yeoman 中称为 generators，所有代码生成的能力都由 generators 提供。是不是充满了想象力？这个包的存在，给脚手架的实现提供了无限可能性。
目前对于前端开发者来说，社区上比较常用的两个脚手架是 Vue CLI 和 Create React App。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了终端命令行工具、零配置脚手架、插件体系、图形化管理界面等。
Vue CLI 的核心原理主要有两部分：
Vue CLI 同时还提供了图形化界面对项目进行初始化、管理，这也是和 Create React App 等 CLI 不同的地方之一。
Vue CLI 官方初始化模板只有一个，内置在 @vue/cli-service 核心插件中，CLI 提供的 api.render('./template') 方法会将模板通过 EJS 模板引擎渲染到内存中，最终在 CLI 中通过 Node 的写文件操作写到本地目录中。如果开发者需要自定义模板，需要开发一个插件来，在插件中编写相关生成代码的逻辑。
如果你想了解更多关于 Vue CLI 的细节，可以阅读相关文档。
Create React App 是 React 官方创建应用的脚手架。
Create React App 的核心思想我理解主要是：
使用 Create React App 时，可以传入 template 参数使用自定义模板：
npx create-react-app my-app --template [template-name]
如果不传，则使用 cra-template 这个默认模板。比如， --template typescript 就会使用 cra-template-typescript 这个 TypeScript 的模板。用户可以按照发布自定义模板，并且发布到 npm 上。最主要的一个规范是，它的 npm 包名是 cra-template-xxx。
如果你想了解更多关于 create-react-app 的细节，可以阅读相关文档。
无论是 create-react-app 还是 Vue CLI，在设计的时候都会尽量考虑插件机制，将能力开放出去给开发者再将功能集成到 CLI。除了有利于自身的功能迭代之外，对于社区开发者来说，都具备了足够的开放性和扩展性。
并且可以看到，这两个脚手架已经抛开了对 git 的依赖，将模板的代码通过 npm 进行管理，并且借助一些类似 ejs 等的模板引擎能力，对静态模板中的代码进行渲染替换，模板代码可以更加多样化。
到了“工业时代”，脚手架不仅仅是在 CLI 中通过 init 等命令生成一个代码目录这么单调了，趋势逐渐向平台化发展，并且枯燥单调的终端界面也在往 UI 图形化界面过渡。
先来看一下图形化界面，上文提到的 Vue CLI 就提供了对应的图形化界面来对项目进行管理。相比于 CLI 枯燥的界面和交互单一，UI 图形化界面有更丰富的交互形式，对于现代开发者来说美观。当然，它不是简单的一个 web 界面，你可以先使用 vue ui 体验一下。
这是 Vue UI 的整体架构图：
我们将 Vue UI 看作运行在浏览器的客户端，而本地终端起了一个 Node 服务当作是服务端。通过插件机制，在插件中开发者可以调用插件 API 做一些事情，也可以完成客户端和服务端的通信。比如在图形化界面上初始化了项目之后，终端会收到事情“触发”，然后将项目代码初始化到本地文件系统中。
除了 UI 图形化界面之外，如今初始化项目的能力也常被集成在 IDE 中，比如小程序开发工具。
打开支付宝小程序开发者工具，就可以直接根据需要选择一个功能完备的模板初始化项目，比如开发者想要在支付宝小程序中体验 Serverless 的功能，就可以直接选中 Serverless 入门 DEMO 这个模板创建项目。
项目初始化之后，开发者也是在这个 IDE 中进行开发、构建、发布，在整个开发链路中，都不会有切换工具带来的负担，对于开发者而言，开发体验是非常棒的。
目前很多前端开发者都在用 VSCode 整个编辑器，如果让开发者为了一些提效的能力去放弃常用、熟悉的编辑器，也不是一个很好的选择。VSCode 插件作为一个轻量级的接入方式，也可以让开发者在 VSCode 中使用初始化项目等功能。
比如，Iceworks 就是一款可视化智能研发助手，帮助开发者快速使用可视化和智能化的能力进行应用开发。
在 VSCode 中安装了 Iceworks 插件之后，就有图形化界面引导创建应用，点击完成之后就直接在本地生成项目文件了。在这之后，就是正常地使用 VSCode 进行开发。
这篇文章主要是介绍前端工程化中初始化项目的部分，CLI 章节对 Vue CLI 和 Create React App 进行了源码解析，其它章节没有展开介绍，感兴趣的朋友可以深入了解一下。
转载地址：http://zupkz.baihongyu.com/