当前位置: 首页 > Web前端 > HTML

如何搭建前端素材平台?

时间:2023-03-28 11:17:06 HTML

什么是素材?材质(Material)的概念在前端领域大家都很熟悉。阿里飞冰解释说,素材是组成一个前端项目的不同单元。根据抽象粒度的不同,我们将素材从小到大分为组件(components)、区域块(areaBlocks)和脚手架(scaffolds)。其实这里可以理解为前端可复用的组件模块可以理解为素材。为什么要有素材?在企业级前端开发中,我们经常会遇到一些问题,比如:项目中有很多重复的功能,你是如何优化的?我想做一个新功能。有没有人做过类似的功能可以用来使用你写的组件?各有各的风格,难以沟通。这种情况下,我们就得搭建素材平台,搭建前端素材系统,统一起来。前端开发流程和技术栈保证资源复用。素材平台建设素材平台主要分为素材开发脚手架和素材管理平台两部分。整体流程图如下:脚手架这里主要参考阿里飞冰提供的素材开发工具iceworks-cli。由于阿里飞冰主要提供的是React生态工具,而我们更喜欢Vue技术栈,所以我们对其进行修改定制更改。提供的主要功能有:素材的创建、素材的开发、素材截图的生成、素材的上传发布、素材数据管理平台的生成和同步,对于素材的创建,我们预先定义了素材的模板,主要是材料开发标准规范的一部分。包括以下内容:素材命名规范素材文件规范素材代码规范素材发布规范素材管理平台素材管理我们使用npm仓库来管理前端素材,有很多私有化的npm仓库比如Verdaccio,cnpm,nexus,这里我们使用用于npm包管理的nexus。但是nexus仓库只能显示npm包。如下,我们不能直接把npm仓库暴露给用户,体验不够好,所以我们需要自定义素材管理平台,展示用户上传的素材,并提供检索功能,方便用户快速搜索自己需要的素材.那么我们如何管理平台获取私库的数据呢?这时候我们就需要一个mediumunpkg来帮助平台拉取私有库的数据。unpkg是前端常用的公共CDN。您可以通过URL访问npm包中的资源,例如:https://unpkg.com/react@16.14…。详见使用unpkg读取我们私有库的包。整体流程如下:其他素材平台iceYouBuilderNextVusion玲珑比特参考素材前端中台搭建从生产到消费,设计素材前端开发环节实战:搭建团队共享组件平台!从业务组件库看前端素材生态阿里CBU体验技术部-结合组件设计监控策略京东零售平台:前端组件资源共享与集中管理实践基于MF的组件共享工作流关注