现代 CLI 和 GUI 方案指南 (2)

预设管理。在 CLI 内部通过统一的实例对 prompt(终端交互)和 preset(预设)进行管理,交互之前存在互联关联层层递进的关系,在初始化的时候,这些用于终端交互的配置就初始化在内存中,根据用户的选择触发不同的逻辑。

灵活的插件系统。在 Vue CLI 中使用了一套基于插件的架构,将 CLI 的逻辑和生成代码的逻辑解耦,通过不同的插件去修改文件内容和配置,生成最终的代码。

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

自定义模板

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

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

源码解析

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

Create React App

image.png

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

核心思想

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

脚手架核心功能中心化:使用 npx 保证每次用户使用的都是最新版本,方便功能的升级

模板去中心化:方便地进行模板管理,这样也允许用户自定义模板

脚手架逻辑和初始化代码逻辑分离:CLI 中只负责核心依赖、模板的安装和脚手架的核心功能,而初始化代码的逻辑在 react-scripts 包里执行

自定义模板

使用 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 核心思路分析。

总结

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

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

常见现代方案

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

图形化界面:Vue UI

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

image.png

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

这是 Vue UI 的整体架构图:

image.png

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

参考链接:

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

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

image.png

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

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