如何建设前端物料平台？

2024-06-24 20:36:35

什么是物料？

物料(Material) 这个概念在前端领域大家都不陌生，在阿里飞冰中的解释物料即组成一个前端项目的不同单位，根据抽象粒度的不同，我们将物料从小到大分为组件（component）、区块（block）和模板（scaffold）。其实在这里可以理解为前端可复用的组件模块都可理解成物料。

为什么要有物料？

在企业级前端开发中，我们经常会遇到一些问题，例如：

项目中有很多重复的功能，你如何去优化？
我想做一个新功能，有没有谁做过类似的功能可以拿来用
大家写过的组件各具风格，不好交流

针对这种情况我们不得不去搭建一个物料平台，建设前端物料体系，统一前端的开发流程和技术栈，保证资源复用率。

物料平台建设

物料平台主要分为两部分内容，物料开发脚手架和物料管理平台。整体流程图如下：

脚手架

在这里我们主要借鉴了阿里飞冰提供的物料开发工具iceworks-cli，由于阿里飞冰提供的主要是React生态工具，而我们偏向于Vue技术栈，所以将其进行修改定制化。提供的功能主要有：

物料的创建
物料的开发
物料文档的生成
物料的截图
物料的上传发布
物料数据的生成与同步管理平台

对于物料的创建，我们事先定义了物料的模板，主要是物料开发的一个标准规范。包括以下内容：

物料命名规范
物料文档规范
物料代码规范
物料发布规范

物料管理平台

物料管理我们使用npm仓库对前端物料进行管理，私有化npm仓库有很多例如Verdaccio、cnpm、nexus，在这里我们使用nexus进行npm包管理。但是nexus仓库只能够展示npm包，如下

我们不能直接把npm仓库暴露给用户，体验上也不够好，所以我们需要自定义物料管理平台去展示用户上传的物料，并提供检索功能，供用户快速查找他所需要的物料。

那么我们管理平台如何去获取私有库的数据呢，这时候我们需要一个媒介unpkg去帮平台拉取私有库的数据，unpkg 是一个前端常用的公共 CDN，你可以通过URL形式访问npm包中的资源，例如：https://unpkg.com/react@16.14.0/umd/react.production.min.js。具体可以看使用unpkg来读取我们私有库的包。整体流程如下：

其他物料平台

ice
YouBuilder
Next
Vusion
羚珑
Bit

参考资料

物料前端中台建设
从生产到消费，设计基于物料的前端开发链路
实战：打造团队的共享组件平台！
从业务组件库看前端物料生态
阿里 CBU 体验技术部 - 结合组件设计监控策略
京东零售平台：前端组件资源共享与中心化管理实践
基于 MF 的组件化共享工作流

如何建设前端物料平台？相关推荐

青海平弦乐库的建设与播放平台
摘要随着计算机的不断发展,计算机已经为经济发展提供了强大的动力,不少行业已经通过计算机实现了管理的信息化和自动化.青海平弦行业是一个前景广阔的行业.自从我国改革开放以来,我国的青海平弦行业迅速发展, ...
实时推荐服务建设——基于Spark平台的协同过滤实时电影推荐系统项目系列博客（八）
系列文章目录初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479系统+
计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479系统+ 计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平 ...
计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479系统+程
计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479系统+程计算机毕业设计ssm民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放 ...
ssm毕设项目民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目民族地区文化调研与数字化保护技术研究---青海平弦乐库的建设及播放平台开发l3479(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行环境配置: Jd ...
腾讯三面：说说前端监控平台/监控SDK的架构设计和难点亮点？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言事情是这样的,上周,我的一位两年前端经验的发小,在腾讯三轮面试的时候被问了一个问题:说说你们公司前端监控项目的架构设计和亮点设计 ...
jeecgboot 前端环境搭建_如何从零开始搭建前端监控平台？
前端监控与优化,一直是前端领域的重要研究方向.尤其在当下页面功能繁杂.页面延迟容忍度降低的时代,一套符合自身业务需要的监控平台,往往能让页面性能优化事半功倍. 现在市面上的大多数监控平台都是对性能.网 ...
GSI-ECM工程建设管理数字化平台
为了解决集团工程项目建设过程中工程质量.安全监管不及时,管理难度大,各业务系统孤立应用,业务协同难,基层工作量大,BIM数据时效性低,BIM与管理业务数据.流程脱节等各类疑难点,广东地空智能科技有限公 ...
微前端在平台级管理系统中的最佳实践
微前端在平台级管理系统中的最佳实践一.什么是微前端二.什么是通用管理端工程三.当管理端工程遇上微前端四.未来展望作者:杨朋飞一.什么是微前端近十年来,前端技术有了长足发展,各种概念与框架 ...

最新文章

热门文章