前端工程化基建探索（6）前端人对前端资产建设的思考和实践

codercao
3,215 阅读11分钟

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

前言

当前大环境下，成熟的前端团队大多数已经完成了前端资产的建设工作，有了这些前端资产，使得前端开发变得高效，更加有体系，前端业务在开发项目中，可直接"信手拈来"，这让前端人工作幸福指数提升！但是对于一些还没有进行前端资产的建设工作工作的同学来说，应该怎么样去建设符合自身的团队或项目的前端资产呢？

一、到底什么东西是前端资产呢？

铁打的项目，流水的前端

我们在公司开发项目的时候，各类职能的人就像流水线上的工人，被当做成资源和工具使用，前端人也被沦为搬砖人，所以如果有一个前端资产的话，我们就能在前端开发的每个环节中解放出来，从开发环节上看，开发的每个环节都涉及到可以输出前端资产，做好技术的回收和有有意识的积累沉淀下来，我们可以大概梳理出：

1.0、 需求和UI

(1) 需求文档工具（Axure RP）
（2）UI查看协同工具（蓝湖，figma）

1.1、 开发阶段

（1）文档建设：编码规范（比如Js规范，Vue开发规范，注释规范，样式规范，接口规范，安全规范），知识库，培训...
（2）流程：项目流程规范（需求获取，代码提交，bug处理），等日常流程规范
（3）技术选型：这里涉及到框架(Vue/React)，通用模块（请求、Lodash）,UI(ElementUI,Ant-Desgin,自建UI组件库)、脚手架工具，代码库等
（4）工具：开发编译器VSCode（不限于WebStorm、IntelliJ IDEA 等）和代码管理(Git/Svn)配置，调试，风格审查，代码评审，文档生成
（5）测试：单元测试，UI测试，多环境测试，自动化测试，性能测试，安全测试

1.2、 部署阶段

（1）自动化部署
（2）部署优化

1.3、 上线后

（1）项目维护和更新机制
（2）监控:业务数据监控，性能监控，用户行为监控
（3） 复盘：分析交流，最佳实践，...

以上是我初步列的一些前端人开发能涉及的项，在大多数前端开发过程中大抵有些相同，这里的全部流程中，前端资产建设就像一颗树的成长过程，我们可以集成团队里所有前端人的智慧和技术探索，我们中的每个人可能对一个或者多个有所沉淀，就像树枝，在团队发展进程中不断的去滋生枝干~

二、前端资产建设的一些实践

下面分享一些前端资产建设的实践：

2.1 文档建设

文档建设，是团队最基础的资产建设，我们古往今来有一句老话叫“白纸黑字，在哪里写着”，我们开发也是常常对业务产品说一切以文档为准。可以知道文档是记录标准的重要的依据,也是前端资产建设最早需要建立的事情。 关于文档建设方案大体可以分为三类方式：
（0）推荐指数 ★ ：青铜-使用传统word, excel
这类方式很传统的办公软件格式，但也是简单易用，缺点是不易同步维护，当然也可以传到SVN或者其他途径获取。

（1）推荐指数 ★★ ：白银-使用第三方在线文档
例如钉钉文档-知识库，语雀，腾讯文档，有道云文档等等，这些第三方在线文档基本上满足前端团队的需求，他们的文本编译器涵盖的内容也很丰富，有思维导图，表格，脑图，代码插入等功能。第三方在线文档，搭建起步简单，易维护，可以多人操作共享和同步通知到改动内容（比如钉钉文档，有权限管理，编辑后改动，可以通知到有权限访问的人）。缺点就是，依赖第三方的稳定性，当第三方在线文档平台维护的时候，可能影响使用（笔者曾在语雀上遇到，网站在维护中，不可用的情况）

image.png 上图为钉钉-文档

（2）推荐指数 ★★★ ：黄金-自建在线文档网站
自建在线文档网站，这类的话需要比较多的资源（开发人力，服务器，维护等）支持才能推动建设。不过也可以参考各大UI库的API文档网站建设，例如element-plus官方文档

1669704801877.png 我们通过去github源码可以看到，"vitepress": "^0.22.4",。以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。（作为程序员高（zhuang）级(bi)用，推荐使用），VitePress 是 VuePress 小兄弟, 基于 Vite构建。感兴趣的可以看看VitePress/VuePress的官网指南，即可上车~当然还有其他的Markdown 文档工具，各位也可以自行使用。

题外话: 如果你是个技术热爱者，强烈推荐去看看ElementUI的官方文档的实现方式，可以说他们把文档（VitePress/VuePress）这类的运用是搞明白了的，很多不错的知识点和技巧，比如菜单的交互，样式相关的处理，一些基于Markdown组件插件开发...

当你选好了文档建设方式，这下即可安排人力开始撰写，上文提到的每个环节的各类文档（可以根据开发流程，进行大纲编写）了~

2.2 开发工具配置

这里以VSCode为例子，Vue技术栈（不限于WebStorm、IntelliJ IDEA 等），VSCode的配置可以根据自己的需要下载相关的插件：

2.2.1、Vetur

Vetur插件是Vue的开发辅助工具，安装它之后会得到代码高亮、输入辅助等功能。 在VSCode的settings.json添加如下配置，代码不自动添加分号

“vetur.format.defaultFormatterOptions”: {
“prettier”: {
“semi”: false,
“singleQuote”: true
},

2.2.2、Auto Close Tag

Auto Close Tag 插件会自动帮你补充HTML闭合标签，比如你输完<button>的后面的尖括号后，插件会自动帮你补充</button>；

2.2.3、Auto Rename Tag

Auto Rename Tag插件会在你修改HTML标签名的时候，自动帮你把它对应的闭标签同时修改掉；

2.2.4、Bracket Pair Colorizer

Bracket Pair Colorizer插件会将你的括号一对一对地用颜色进行区分，这样你就不会被多层嵌套的括号找花费大量精力，来看看它的样子：

image.png

2.2.4、Guides

Guides插件能够帮你在代码缩进的地方用竖线展示出索引对应的位置，而且点击代码，它还会将统一代码块范围的代码用统一颜色竖线标出，如图：
image.png

2.2.4、注释KoroFileHeader

image.png KoroFileHeader 在vscode左下角点击设置按钮，选择“设置”，然后输入“fileheader”

image.png

"fileheader.customMade": {    //此为头部注释
        "Description": "",
        "Version": "1.0",
        "Autor": "codercao",
        "Date": "Do not edit",
        "LastEditors": "codercao",
        "LastEditTime": "Do not edit"
    }，
    "fileheader.cursorMode": {  //此为函数注释
        "description":"",
        "param": "",
        "return": "",
        "author":"codercao"
    }

1.描述内容(descripition)为了便捷添加，直接设置为空；
2.这里的日期(Date)和修改时间(LastEditTime)设置，本身软件就会自行添加和更新，所以直接写“Do not edit”即可。
3.除日期和参数(param)外的其他内容，均可尝试设置为汉字，方便查看
头部注释: 快捷键：crtl+alt+i（window）,ctrl+cmd+t (mac)
函数注释：ctrl+alt+t (window), ctrl+alt+t(mac)

当你创建或修改文件的一个文件的时候，自动就会在头部生成注释 image.png

2.2.5、VScode里自定义模板

1、唤出VScode控制台, 输入
win: Ctrl + Shift + P
mac: command + Shift + P
image.png

2、输入snippets
点击 首选项：配置用户代码片段

image.png
3.新建文件vue.json.code-snippets
这里以Vue文件为例进行配置，其他技术框架大同小异~

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
  "vue-template": {
    "prefix": "vue-template",
    "body": [
        "<template>",
        "  <div class=\"\">",
        "",
        "",
        "",
        "",
        "  </div>",
        "</template>",
        "<script setup lang=\"ts\">",
        "",
        "",
        "",
        "",            
        "</script>",
        "<style lang=\"less\" scoped>",
        "",
        "",
        "",
        "",
        "</style>",
        ""
    ],
    "description": "快速创建vue3模板"
}
}

4.使用模板
当你新建一个Vue文档的时候，输入Vue,就会自动补全提示是否用快速创建模板，丝滑快速,强烈推荐~ image.png

2.3 代码规范建设

开发规范的主要目的在于:

  • 降低成员加入项目的成本。
  • 提高工作效率及协同开发便捷性。
  • 高度统一的代码风格

这个因团队而定，可以进行划分，比如
JS的规范

  • 命名,驼峰命名，语义化标准...。
  • 语法方面的, 比如不必要生成新数组用forEach 替代 map。
  • 代码风格，缩进，单双引号等
  • ...

VUE 开发规范
这里可以直接套用vue2官方文档的风格指南（可能比较少同志关注到）

样式开发规范
根据自己的团队需求定制

代码提交规范
例如：

[编号] xxxx
[修改内容] 功能模块描述
[提交类型]BUG修复/新功能/需求修改/版本制作/代码整理/解决编译不过/初次提交/阶段性递交/追加递交
[需要测试]是/否  

实例

[编号] FT-2022-11-29-01
[修改内容] 掘金编译器
[提交类型]BUG修复
[需要测试]是

2.4 UI组件库建设

UI组件库，对于大多数前端团队来说，要从O到1自研UI组件库，感觉似乎不太现实，这里人力投入巨大，通常我们是使用第三方UI库（Element/Ant），进行二次改造和业务组件融合，这里简单聊一下前端资产之UI库思考：

2.4.1 基础组件重置

通常在一个行业中，有行业标准的UI风格，而第三方UI库的风格往往在某个具体行业不适用，这时候我们就需要对UI风格进行重置，比如element-plus里的input框默认高度是32px(含边框)，而我们的设计师期望全部input框高度是28px,这时候就需要进行改造了。

但实际开发中，我们往往对图（echart）表(table)类需要进行二次封装

(1)色板
为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。通常我们会把一些常用的颜色色值进行常量化，正如element-plus一样，我们也可以根据业务抽离出css变量，这样有利于换肤等功能实现 image.png

(2)图标 我们可以自定义一些自己业务需要的图标，封装对应的图标组件 ....

2.4.2 业务组件

在前端领域，业务开发通常就是调整样式、拼接模板、绑定事件、接口请求、更新页面这些内容。其实我们可以通过更好的代码设计，来提升写业务代码过程中的编程体验。一个成熟的业务，往往基本上功能是趋向稳定的，对于前端人来说，慢慢的也可能发现一些重复复用的业务组件，业务组件通常是多个基础组件根据业务的组合，或者定制开发，比如一些新闻滚动条组件...，在项目中只需要引入即可。

2.4.2 JS函数库建设

对于中级以下前端面试经常会问到函数相关的问题，比如对象或数组的深拷贝，精准判断数据类型，日期格式化，将有父子关系的数组转换成树形结构数据，生成随机字符串，手机号码校验，金额转换...等等，当然现在也有很成熟强大的JS工具库，但他们大多数多而全，我们也可以根据自身需要做小而美的JS函数库，当然甚至把请求也可以封装其中。

以上内容，都可以作为自己库发布到公司内网npm私有仓库里或者开放到公有的npm官网里，供团队或者大家使用。

2.5 前端自动化部署

持续的软件版本发布/测试项目，监控外部调用执行的工作，这时候就需要借助工具了，这里推荐jenkins，具体的配置使用，也有很多文章描述了

image.png

最后

前端工程化基建探索系列文章，已经写了好几篇了，前面几篇大多数以剖析技术为主，这篇专门软实力方面的入手，谈谈前端人对前端资产建设的思考。当然这里只是抛砖引玉简单列举了一些初级的实践，前端万物皆可资产化，为降低成员加入项目的成本，提高工作效率及协同开发便捷性而冲锋！

avatar
文章
阅读
粉丝