现代 CLI 和 GUI 方案指南

原文链接：http://axuebin.com/articles/fe-solution/cli/desc.html，转载请联系

写在前面

提到初始化项目，那就必须提到脚手架这个名词，那为什么这篇文章的标题不是关于脚手架而是关于初始化项目呢？

脚手架这个名词来源于建筑工程领域，百度百科对其的解释是“脚手架是为了保证各施工过程顺利进行而搭设的工作平台”，也就是说脚手架为工人提供了施工的基础功能。将其引申到软件工程领域，又是什么含义呢？

• 狭义上讲，脚手架是一个可以快速地使用配置好的工程模板初始化工程的工具，避免重复工作，为开发者提供便利；
• 广义上讲，脚手架是一个完善的面向整个前端项目生命周期的工程解决方案，从初始化、开发调试到构建部署，都提供了一系列的工具或者规范，并且集成到一个“工具”中，开发者只需关心业务逻辑开发即可，这工具也可以称为“脚手架”。

由于完整的工程解决方案会涉及到大量的知识点，在这里就不展开说了。本文介绍的脚手架仅是狭义上的项目初始化。

为什么需要脚手架

现在大多数开发者已经习惯使用 vue-cli / create-react-app 等工具来快速初始化一个项目，不妨先看看前端项目初始化的一个发展历程：

1. 远古时代。手动创建前端三件套：index.html/index.js/index.css，在 index.html 里分别引入 index.js 和 index.css
2. 石器时代。将项目模板代码托管到 Git/SVN 上，使用的时候先手动将代码拉到本地，然后修改文件夹名以及项目中的配置
3. 青铜时代。通过脚本，自动化做了一些事情：拉取项目模板、配置项目信息等
4. 蒸汽时代。形成一套完整的命令行工具，比如 vue-cli/ create-react-app 等
5. 工业时代。在 cra/vue-cli 的基础上定制个性能力，接入自定义模板、自动化 Git 流程、数据采集等
6. 现代。脚手架已经跳出终端（命令行），有了可视化、WebIDE 等方案，通过更为方便的交互即可完成项目的初始化

从这样一个发展历程可以看出，脚手架解决的核心问题就是 —— 帮助开发者更方便地初始化项目，这也就是为什么需要脚手架。总结来说，脚手架最重要的作用有两点：

1. 提高效率。之前初始化一个可用的项目可能需要 1 个小时甚至更久，到如今只需要敲个命令或者点下鼠标然后伸个懒腰就搞定了
2. 降低成本。比如创建文件、配置项目信息