乐趣区

关于前端:如何建设前端物料平台

什么是物料?

物料(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…。具体能够看应用 unpkg 来读取咱们公有库的包。整体流程如下:

其余物料平台

  • ice
  • YouBuilder
  • Next
  • Vusion
  • 羚珑
  • Bit

    参考资料

  • 物料前端中台建设
  • 从生产到生产,设计基于物料的前端开发链路
  • 实战:打造团队的共享组件平台!
退出移动版