如何建设前端物料平台？
什么是物料？
物料(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来读取我们私有库的包](https://zhuanlan.zhihu.com/p/84119287)。整体流程如下：
其他物料平台
参考资料
版权声明: 本文为 InfoQ 作者【龙之幽谷】的原创文章。
原文链接:【http://xie.infoq.cn/article/e9b801b8be999043c425a823b】。文章转载请联系作者。
还未添加个人签名 2018.02.21 加入
还未添加个人简介
评论