现代 CLI 和 GUI 方案指南

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

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

狭义上讲,脚手架是一个可以快速地使用配置好的工程模板初始化工程的工具,避免重复工作,为开发者提供便利;

广义上讲,脚手架是一个完善的面向整个前端项目生命周期的工程解决方案,从初始化、开发调试到构建部署,都提供了一系列的工具或者规范,并且集成到一个“工具”中,开发者只需关心业务逻辑开发即可,这工具也可以称为“脚手架”。

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

为什么需要脚手架

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

image.png

远古时代。手动创建前端三件套:index.html/index.js/index.css,在 index.html 里分别引入 index.js 和 index.css

石器时代。将项目模板代码托管到 Git/SVN 上,使用的时候先手动将代码拉到本地,然后修改文件夹名以及项目中的配置

青铜时代。通过脚本,自动化做了一些事情:拉取项目模板、配置项目信息等

蒸汽时代。形成一套完整的命令行工具,比如 vue-cli/ create-react-app 等

工业时代。在 cra/vue-cli 的基础上定制个性能力,接入自定义模板、自动化 Git 流程、数据采集等

现代。脚手架已经跳出终端(命令行),有了可视化、WebIDE 等方案,通过更为方便的交互即可完成项目的初始化

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

提高效率。之前初始化一个可用的项目可能需要 1 个小时甚至更久,到如今只需要敲个命令或者点下鼠标然后伸个懒腰就搞定了

降低成本。比如创建文件、配置项目信息等都是重复工作,开发者没必要花精力在这些可以自动化的事情上

在完整的前端工程体系中,脚手架起到至关重要的作用。

接下来介绍几个目前常用的的、你一定见过的几种脚手架方案,你是否有思考过它是如何实现的呢?

常见脚手架底层方案

目前,常见的脚手架底层都会依赖两种方案:使用 download-git-repo 来下载模板代码,以及使用 Yeoman 来作为脚手架的一个核心能力进行扩展。

download-git-repo

通过 download-git-repo 这个 npm 包可以实现 git 仓库的拉取,支持 GitHub、GitLab 等。基于这个 npm 包,我们可以写一个简单的脚本来实现简易的模板下载功能。

image.png

关于 download-git-repo 的用法在这里就不展开了,感兴趣的可以自己试试看。

Yeoman Generator

image.png

Yeoman 是一个较早就出现的脚手架工具,它的第一次发布已经是在 8 年前,那时候我还没开始学习前端。很多人都说,前端技术太杂,各种技术更新太快,这句话也没什么问题,前端技术随着移动互联网的爆发也迎来了百花齐放的时代,一些技术在潮流中被后浪就拍没了。Yeoman 历经 8 年还存活着,这是为什么呢?不急,待我们剖析了 Yeoman 的原理之后,你会觉得它确实可以在现在的前端工程化中占有一席之地。

Yeoman is a generic scaffolding system allowing the creation of any kind of app.

将 Yeoman 放在了「常见脚手架底层方案」,是因为 Yeoman 它并不能直接初始化项目所需的文件,它是一个脚手架系统,开发者们使用 Yeoman 提供的 API 可以定制任意脚手架,完全开放、自由的,扩展性极强。

可以理解 Yeoman 提供一个插件体系,开发者可以自定开发插件来使用 Yeoman 的能力,这个“插件”在 Yeoman 中称为 generators,所有代码生成的能力都由 generators 提供。

是不是充满了想象力?这个包的存在,给脚手架的实现提供了无限可能性。

常见脚手架集成方案

目前对于前端开发者来说,社区上比较常用的两个脚手架是 Vue CLI 和 Create React App。

Vue CLI

image.png

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具、零配置脚手架、插件体系、图形化管理界面等。

核心思想

Vue CLI 的核心原理主要有两部分:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfxxx.html