【前端工程化基础 - 初始化项目】现代 CLI 和 GUI 方案指南

axuebin

【前端工程化基础 - CLI 篇】系列文章,持续更新中:

关注公众号玩相机的程序员,第一时间阅读最新文章。

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

0. 写在前面

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

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

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

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

1. 为什么需要脚手架

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

image.png

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

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

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

2. 常见脚手架底层方案

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

2.1 download-git-repo

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

image.png

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

2.2 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 提供。

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

3. 常见脚手架集成方案

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

3.1 Vue CLI

image.png

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

3.1.1 核心思想

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

  1. 预设管理。在 CLI 内部通过统一的实例对 prompt(终端交互)和 preset(预设)进行管理,交互之前存在互联关联层层递进的关系,在初始化的时候,这些用于终端交互的配置就初始化在内存中,根据用户的选择触发不同的逻辑。
  2. 灵活的插件系统。在 Vue CLI 中使用了一套基于插件的架构,将 CLI 的逻辑和生成代码的逻辑解耦,通过不同的插件去修改文件内容和配置,生成最终的代码。

Vue CLI 同时还提供了图形化界面对项目进行初始化、管理,这也是和 Create React App 等 CLI 不同的地方之一。

3.1.2 自定义模板

Vue CLI 官方初始化模板只有一个,内置在 @vue/cli-service 核心插件中,CLI 提供的 api.render('./template') 方法会将模板通过 EJS 模板引擎渲染到内存中,最终在 CLI 中通过 Node 的写文件操作写到本地目录中。

如果开发者需要自定义模板,需要开发一个插件来创建新的模板,在插件中编写相关生成代码的逻辑。

3.1.3 源码解析

如果你想了解更多关于 Vue CLI 的细节,可以阅读 Vue CLI 是如何实现的 -- 终端命令行工具篇

3.2 Create React App

image.png

Create React App 是 React 官方创建应用的脚手架。

3.2.1 核心思想

Create React App 的核心思想我理解主要是:

  1. 脚手架核心功能中心化:使用 npx 保证每次用户使用的都是最新版本,方便功能的升级
  2. 模板去中心化:方便地进行模板管理,这样也允许用户自定义模板
  3. 脚手架逻辑和初始化代码逻辑分离:CLI 中只负责核心依赖、模板的安装和脚手架的核心功能,而初始化代码的逻辑在 react-scripts 包里执行

3.2.2 自定义模板

使用 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

3.2.3 源码解析

如果你想了解更多关于 create-react-app 的细节,可以阅读 create react app 核心思路分析

3.3 总结

无论是 create-react-app 还是 Vue CLI,在设计的时候都会尽量考虑插件机制,将能力开放出去给开发者再将功能集成到 CLI。除了有利于自身的功能迭代之外,对于社区开发者来说,都具备了足够的开放性和扩展性。

并且可以看到,这两个脚手架已经抛开了对 git 的依赖,将模板的代码通过 npm 进行管理,并且借助一些类似 ejs 等的模板引擎能力,对静态模板中的代码进行渲染替换,模板代码可以更加多样化。

4. 常见现代方案

到了“工业时代”,脚手架不仅仅是在 CLI 中通过 init  等命令生成一个代码目录这么单调了,趋势逐渐向平台化发展,并且枯燥单调的终端界面也在往 UI 图形化界面过渡。

4.1 图形化界面:Vue UI

先来看一下图形化界面,上文提到的 Vue CLI 就提供了对应的图形化界面来对项目进行管理。

image.png

相比于 CLI 枯燥的界面和交互单一,UI 图形化界面有更丰富的交互形式,对于现代开发者来说美观。当然,它不是简单的一个 web 界面,你可以先使用 vue ui 体验一下。

这是 Vue UI 的整体架构图:

image.png

我们将 Vue UI 看作运行在浏览器的客户端,而本地终端起了一个 Node 服务当作是服务端。通过插件机制,在插件中开发者可以调用插件 API 做一些事情,也可以完成客户端和服务端的通信。比如在图形化界面上初始化了项目之后,终端会收到事情“触发”,然后将项目代码初始化到本地文件系统中。

参考链接:https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

4.2 IDE 集成编辑器:小程序开发者工具

除了 UI 图形界面之外,如今初始化项目的能力也常被集成在 IDE 中,比如小程序开发工具。

image.png

打开支付宝小程序开发者工具,就可以直接根据需要选择一个功能完备的模板初始化项目,比如开发者想要在支付宝小程序中体验 Serverless 的功能,就可以直接选中 Serverless 入门 DEMO 这个模板创建项目。

项目初始化之后,开发者也是在这个 IDE 中进行开发、构建、发布,在整个开发链路中,都不会有切换工具带来的负担,对于开发者而言,开发体验是非常棒的。

参考链接:https://opendocs.alipay.com/mini/ide/start-page

4.3 VSCode 插件:Iceworks

目前很多前端开发者都在用 VSCode 整个编辑器,如果让开发者为了一些提效的能力去放弃常用、熟悉的编辑器,也不是一个很好的选择。VSCode 插件作为一个轻量级的接入方式,也可以让开发者在 VSCode 中使用初始化项目等功能。

比如,Iceworks 就是一款可视化智能研发助手,帮助开发者快速使用可视化和智能化的能力进行应用开发。

image.png

在 VSCode 中安装了 Iceworks 插件之后,就有图形化界面引导创建应用,点击完成之后就直接在本地生成项目文件了。在这之后,就是正常地使用 VSCode 进行开发。

参考链接:https://ice.work/docs/guide/gui-start

5. 总结

这篇文章主要是介绍前端工程化中初始化项目的部分,CLI 章节对 Vue CLI 和 Create React App 进行了源码解析,其它章节没有展开介绍,感兴趣的朋友可以深入了解一下。

个人原创技术文章会发在公众号玩相机的程序员上,用键盘和相机记录生活的公众号。

阅读 859

玩相机的程序员
公众号@玩相机的程序员,原创文章同步更新,用相机和键盘记录生活
3.8k 声望
127 粉丝
0 条评论
你知道吗?

3.8k 声望
127 粉丝
宣传栏