San CLI UI ——不只是San CLI的GUI（功能篇）

本期的主题是 San CLI 的图形化界面 San CLI UI，整体分为功能篇、原理篇、实践篇共三篇，会按照「功能 - 原理 - 实践」的顺序，带领大家了解 San CLI UI 的基础功能，剖析整体架构、实现原理，重点介绍插件系统的实现，再通过实践部分演示插件的定制开发。

前言

什么是 San CLI UI？

在介绍 San CLI UI 之前，我们首先回顾一下  San CLI 。

我们对 San CLI 的定义，是一个命令行工具，内置 Webpack 前端工程化构建，同时支持定制化，定制属于自己的前端开发工具集。

简单来说， San CLI 的目标是解决工程标准化问题，因此除预置了脚手架工程外，  San CLI 还内置了现代浏览器打包，部署、包分析、性能分析等功能和最佳实践；支持快速文档建站，解决开发中文档编写的痛点；提供的插件机制，使得开发者可以基于  San CLI 自由定制命令。

回到 San CLI UI 是什么？

首先，  San CLI UI  是  San CLI  的图形化操作界面，实现  San CLI  工程项目的可视化管理；  San CLI UI  的功能定位是一款可视化的项目管理和构建的工具，在设计之初借鉴了业界比较优秀的可视化工具   Vue-CLI-UI  和  JSUI   的功能设计，以期更加适应用户的使用习惯，降低接入门槛，带来更好的使用体验，进而令工具更广泛地传播。

其次， San CLI UI 附加了插件化设计，使得  San CLI UI 在功能增强的基础上更易于扩展，为更多功能集成提供了可能。随着插件建设的丰富，比如集成各种构建流程、小工具等，最终目标实现千人千面的个性化工作台，用户无需辗转各种网站工具，可以在  San CLI UI 处理一切工作相关的事情。

San CLI UI 的特点

基于 San CLI UI 的图形化和插件化，可以概括以下特点：

• 操作简单，新手友好

• 可视化操作

• 集成项目管理

• 自带配置语义

• 构建过程更直观

• 自定义工具集

首先是操作简单，对新手友好，仅需一行简单的命令，即可启动 San CLI UI 工作界面；所有相关功能均可以通过鼠标操作来实现；本地项目统一管理，方便的进行增删改查；对于  San CLI 默认的配置项，自带语义解释，用户无需翻阅文档即可快捷修改配置；在构建过程中，各个参数统计更加直观，提升优化及问题定位的速度；各种触手可及的小工具，大大提升工作体验。

整体介绍

功能简介

San CLI UI 核心功能分为六个部分，包括：项目的管理、配置管理、插件管理、依赖管理、内置构建任务以及仪表盘小工具。如图所示

整体功能可分为三类：

• 项目管理

• 工程构建

• 工具扩展

接下来将逐一介绍各类功能

项目管理

进入 San CLI UI 的主页即为项目管理界面，可对显示的本地列表项目进行搜索、收藏、在编辑器打开、重命名、从  San CLI UI 删除（不会删除本地文件），删除后可通过导入项目重新显示在项目列表中，功能演示如下

工程构建

我们从整个项目的研发流程中来看，从项目的创建、开发、测试到上线， San CLI 对每个环节都提供了相应的命令支持，极大的提升了研发体验和开发效率。

图中可以看到 San CLI UI 对应的各环节的功能实现，在整个研发流程中，首先要做的就是项目创建。

项目创建

点击首页顶部导航右上角 "+" 按钮，可进入创建项目页，项目创建主要实现 san init 命令的功能：

san init 命令首先会进行本地的目录检测，是否存在对应文件，然后拉取脚手架模板，读取模板的配置项，在命令行中通过交互式问答的方式，得到项目的配置信息，最终生成项目，并可选择是否安装依赖。而在  San CLI UI 内操作如下：

主要操作步骤：

• 选择目录：首先在本地文件浏览器中选择需要创建项目的目录，点击创建

• 选择模板：可选择预置脚手架或自定义脚手架

• 输入配置：输入项目需要的初始化信息

• 依赖安装：配置完成后系统会自动执行依赖安装

• 创建完成

在 San CLI UI 中实现了 文件浏览器 功能，通过鼠标操作实现：

• 目录切换：可以通过点击路径切换，或者直接点击编辑后输入本地路径

• 目录收藏：对本地路径进行收藏，会进入收藏列表，下次可快速切换

• 新建文件夹：最右侧点击更多，可新建文件夹及显示隐藏文件

项目导入

项目导入功能主要用于将已创建的 san 项目导入到 San CLI UI 的工作台。

至此工程创建完毕，接下来我们首先要做的就是修改项目的配置，并在本地运行。

配置管理

San CLI 的配置文件为 san.config.js ，该文件放在项目的根目录下，当执行  San CLI 命令时，  San CLI 会自动读取   san.config.js   的内容，在项目创建后，首先需要修改  san.config.js 来配置文件打包等选项。 San CLI UI 将配置的每一项转换为表单，同时将配置项的语义直观的展示在页面，用户无需查找文档，直接在  San CLI UI 中修改表单，保存后即可看到   san.config.js   对应位置的修改。

在 San CLI UI 中，通过配置管理来集中查看、修改项目的各种配置文件。默认的可进行管理的配置文件有 san 项目配置文件和 eslint 配置文件。当然也支持用户定义其他可配置项，配置的定义会在下文的 插件 中讲到。

依赖管理与插件管理

在 San CLI UI 中，可直接进行项目插件和依赖的安装、更新、卸载、删除等操作，依赖管理和插件管理的核心是 npm 包的安装可视化操作，好处是：

• npm install 的可视化管理，组件升级更直观

• 操作简单，快速引入依赖

• CLI 的插件集合，更容易发现新包，提升检索效率

依赖管理

在依赖管理中，可以查看项目已安装的依赖列表，也可以在上方的搜索框中搜索项目已安装的依赖，然后更新或卸载它们。

安装依赖 : 点击右上角的 “安装依赖” 按钮后，可以根据关键词搜索所有已发布的 npm 包，并且按不同方式对搜索结果进行排序，然后选择包进行安装。

插件管理

在插件管理，可以查看项目已安装的插件列表，也可以在上方的搜索框中搜索项目已安装的插件，然后更新或卸载它们。

安装插件 : 点击右上角的 “安装插件” 按钮后，我们可以浏览所有的插件，这里我们将   San CLI  插件和   San CLI UI   插件进行了分类展示，提升搜索效率。

配置和依赖确认完毕后，接下来需要启动本地服务进行调试了。

任务管理

在 San CLI 中主要通过  san serve 和  san build 命令进行生产和开发环境的打包，San 的脚手架工程内置了四个命令，包括启动本地服务、生产环境打包、打包分析、现代模式打包等，脚手架工程的 package.json 内可执行的命令有：

san serve // 本地打包 + local server
san build // 生产环境打包
npm run start // 打包+启动本地服务
npm run build // 打包发布
npm run analyzer // 打包分析
npm run build:modern // 现代模式打包

在 San CLI UI 的任务管理中对每一个内置命令实现了对应的可视化操作任务，同时增加了一个内置的  inspect 任务，用于查看 webpack 的配置。

进入其中一个任务的详情页后，比如 start，在右上角设置按钮可以配置该任务，点击运行启动任务。 San CLI UI 的任务管理，在实现内置命令执行的同时，通过插件机制实现了命令的增强：

• 在仪表盘将打包过程及结果的统计信息进行了可视化的展示，包括资源大小及执行速度等，使得打包过程更清晰，产出大小分类更直观。

• 在任务的分析 tab，将包的大小分下采用环状统计图显示，对比更明显，有助于快速定位优化。

• San CLI UI 将后台的原始输出展示在页面，用户无需手动切换窗口，更快定位编译问题。

工具扩展

工具扩展主要体现在项目仪表盘上。

内置部件

在仪表盘，可以找到各种实用的小部件：

• 欢迎 部件 ：显示  San CLI UI 欢迎窗口及简要功能介绍。

• 终止端口 部件：输入本地启动的端口，点击终止即可执行终止本地端口命令。

• 运行任务 部件：在运行任务部件中，配置一个任务，比如 start 任务，就可以快捷地运行 start 任务了。“运行任务” 部件支持配置多个，也即可以配置多个不同任务同时运行。

• 新闻 部件：在新闻部件，可以配置喜欢的 RSS 源直接阅读，无需跳转第三方网站（默认配置的 RSS 源是 https://ecomfe.github.io/atom.xml）。点击右上角的 “全屏” 按钮还可以获得最佳的阅读体验。

自定义仪表盘

点击右上角的 “自定义” 按钮后，可以进入自定义仪表盘的编辑界面，该界面：

• 支持增、删、移动小部件，为每个项目定制不同的仪表盘

• 支持通过下载安装或开发等方式增加个性化的小部件

可以看到，除了默认的 “欢迎” 部件和 “终止端口” 部件，目前还可以添加的部件有 “运行任务” 部件和 “新闻” 部件。

最后

感谢你阅读到了这里，以上就是《San CLI UI —— 不只是 San CLI 的 GUI（功能篇）》的全部内容。

本篇主要介绍了 San CLI UI 是  San CLI 图形化工作台，支持插件自定义。它包括：项目管理、配置管理、依赖管理、插件管理、任务管理、仪表盘六个基本功能，在实现  San CLI 图形化操作的同时，基于插件化的思想，实现工具可扩展，用户可根据需求增加、删除或者开发定制的小工具，整体功能可分为：项目管理、工程构建、工具扩展三类。

下篇介绍 San CLI UI 的整体架构，深入实现原理，解析  San CLI UI 的工作流程，可以了解到插件系统在  San CLI UI 中的实现，哪些功能是基于插件系统实现？以及我们可以基于插件系统定制哪些功能？

期待下期《San CLI UI —— 不只是 San CLI 的 GUI（原理篇）》再见！

EOF

作者：张婷婷

2021 年 1 月 7 日