代码片段plus ??? 打工神器: 飞冰物料库
为什么使用飞冰物料库
日常开发中,前端的逻辑、样式和交互都有共同点。为了这些相同的逻辑、相同的交互,相同的样式规范,我们已经有了样式组件库,业务组件库和antd的样式主题包。
虽然目前已有的组件库和主题包已经帮助我们节省了不少的时间,大大提升了我们的开发效率。
但目前已有的库或者包,所对应的仅仅是一个组件、一个样式。对于一整个相同或者相似的公共交互页面,我们目前的方法仍还是进行ctrl c + ctrl v
。
对此,我一直在思考是否有更加简洁、高效的办法,经过对飞冰物料库进行调研,发现是一个不错的实现方式。
什么是飞冰物料库
我们首先要知道,飞冰不等于飞冰物料库,飞冰是一个基于 React 的研发解决方案,包含多种功能,物料库只是其中一部分。
物料分为组件、区块、项目三种类型:
组件:我们日常使用的组件,如Doraemon;
区块:一般是一个UI模块,使用区块时会将区块代码通过新建component的形式以组件的形式拷贝到项目代码中,我们可以进一步的对区块代码进行任何改动;
项目模板:项目脚手架,用于项目初始化。
因为我们的需求,目前只考虑区块。
使用物料库
插件安装
打开 VS Code,确定已经安装了 AppWorks 插件集合 \(opens new window\)[1]
一个扩展包,提供了多个功能,如代码补全、代码信息提示和代码重构以及我们关心的物料库使用。
可视化开发
AppWorks 提供了海量的物料的来提升我们的日常开发效率。我们可以使用模板快速创建项目;可以使用物料面板,将一些物料添加到当前开发的项目中。
丰富的物料资源
当然,如果已经有的物料不能满足我们的需求,AppWorks 还提供了开发自己物料的一整套流程,我们完全可以打造属于自己的物料库。并且因为很多公司会搭建私有的 npm,因此如果需要建设私有化的物料,其还贴心提供了相应的解决方案。
物料开发
开发前,先全局安装CLI
npm install @appworks/cli -g# 检查是否安装成功appworks -V # V 大写
复制代码
初始化项目
新建一个项目执行
# 创建自己的项目目录并进入到对应目录mkdir my-material && cd my-material# 执行脚手架appworks init
复制代码
执行脚手架指令
根据需求,在执行脚手架的时候,类型选择,我们选择带区块的,其他选项,根据个人需要自定义即可。
脚手架生成项目结构
目录结构
通过结构查看,我们发现其内置了一个demo供我们开发参考,所以我们可以根据提示,先安装整个项目依赖,安装完成后,再进入到区块,安装区块的依赖,然后进行demo查看。
#安装全局依赖npm install# 安装区块依赖,并运行cd blocks/ExampleBlocknpm installnpm start
复制代码
执行start结果
物料区块开发
我们新加一个JiangNiaoTest区块,我们在项目根目录执行
appworks add# 或者appworks add block
复制代码
接下来的操作,我们仅仅需要按照平时开发代码一样,写自己的代码就可以了(如何产出优雅高效的区块,这里还需要讨论和实践,不做过多阐述)。代码开发完成后,我们需要对npm进行发布。
物料数据生成
将每个区块搞定之后,我们只需要返回到项目根目录,执行
appworks generate
复制代码
马上,你会在build目录下看到materials.json文件,打开文件,将会发现,这个文件描述了刚开发的整个物料集合。
物料数据发布与使用
在进行物料数据发布之前,我们需要先注册自己的物料站点,该站点需要我们用淘宝账号注册。
物料中心账号注册或者登录[2]
成功后
物料中心
创建站点[3]
物料站点
创建成功后记录自己的token,用于发布物料
个人物料资源
站点注册完成后,我们就可以在项目根目录执行appworks sync,
在这里,它会让你输入你刚刚生成的站点token,token正确后,就会出现自己设置的站定名字
上传成功后,会得到一个链接
我们拿到这个链接,在前面提到的Appworks的vscode插件中
使用自己的物料
一系列操作之后,大功告成,可以使用了。
注意:我们这里配置的区块,而直接打开Appworks只能看见模板,所以我们在jsx/tsx等文件下右键才能看到我们的区块
私有化部署
对于私有化部署,官网给出了一种解决方案:使用unpkg服务。
我们仅仅需要设置appworks的配置即可
全局配置
# 设置npm地址appworks config set registry https://registry.xxx.com# 设置unpkg地址appworks config set unpkgHost https://unpkg.xxx.com# 确认是否生效appworks config list
复制代码
项目级配置
开发物料集合的场景,也可以在项目级配置该字段,只需要配置根目录 package.json 的 materialConfig 字段即可:
{"materialConfig": {"type": "react","registry": "https://registry.xxx.com","unpkgHost": "https://unpkg.xxx.com"}}
复制代码
如此配置之后,在当前物料源项目执行 appworks 相关命令会使用该字段。
私有化数据托管
对于私有化,物料中心是无法使用的,需要我们自己将前文说到的build目录下看到materials.json文件以npm的形式,上传到内部的npm包环境下,并通过unpkg的形式拿到静态资源,在将改地址复制到Appworks下即可使用。
私有化也大功告成。
整体开发流程图
写在最后
在现有代码进行开发抽离的时候,我们对于现有的
公共类型定义types、公共变量、公共组件
之类的东西,需要注意,需要进行合理的处理,不然将会出现代码冗余,这样将会丧失物料库的意义,这里,还需要好好想一下。
如果有什么疑问,欢迎评论区!!!
感谢看到这里!!!
关于本文
来自:前端开发江鸟
https://juejin.cn/post/7100491418929463310
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
代码片段plus ??? 打工神器: 飞冰物料库相关推荐
- php编程神器,PHP代码神器 十个PHP代码片段超极好用
PHP开发中敲代码是最能磨练人意志的,面对枯燥的代码有些人感兴趣,然而有些人不耐烦,面对如此多的代码总想着可以复制粘贴,以提高效率.PHP代码有这种功能,今天小编给大家推荐一些PHP代码神器,十个超极 ...
- 前端工程化: 脚手架+物料库快速生成新项目
零.前言 美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧! 一.背景 笔者所在公司并非大厂, 发现一些痛点. 1.前端研发 ...
- 设置VSCode快捷键vue生成代码片段
Ctrl+Shift+P 复制下面的代码片段 {"vue-template": {"prefix": "vue-强哥的模板", //这个是模 ...
- 分享.NET开发中经常使用到的代码片段 完全从实际项目中提取出来,也可被反反复复的重复借用...
几年前,一篇<ASP.NET开发人员经常使用的三十三种代码>非常流行,它总结了一些经常在ASP.NET开发中使用到的代码,直接可以拿来使用.今天重读这篇文章,有感而发,善于总结也是进步,于 ...
- 代码片段管理工具_VS代码片段:提高编码效率的最强大工具
代码片段管理工具 by Sam Williams 通过山姆·威廉姆斯 VS代码片段:提高编码效率的最强大工具 (VS Code snippets: the most powerful tool to ...
- 985大学的高材生只会写代码片段,丢人吗?
很多同学在学习编程的时候都会遇到各种各样的难题,比如:没有合适的资料.学习过于碎片化.资料的质量层次不齐.看了很多视频自己动手时却还是不会.接触不到完整项目.无法检测自己的编程水平是不是企业所认可的- ...
- 20+个可重复使用的jQuery代码片段
jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...
- 【代码片段收集】Python解析AndroidManifest.xml
写在前面的话 这个好像只适合我自己看,感觉有的代码片段复用率很高,总是反复需要用到.所以就整理一下,方便自己查找. # find the MainActivity and let the MainAc ...
- 30秒的PHP代码片段(3)字符串-String 函数-Function
本文来自GitHub开源项目 点我跳转 30秒的PHP代码片段 精选的有用PHP片段集合,您可以在30秒或更短的时间内理解这些片段. 字符串 endsWith 判断字符串是否以指定后缀结尾,如果以指定 ...
最新文章
- Oracle SID爆破工具SidGuess
- RecSys 2016总结
- 【Node】node启动过程
- 程序员必须要掌握的十大经典算法
- jsapi支付签名_微信支付小程序支付全流程
- CPU 明明 8 个核,网卡为啥拼命折腾一号核?
- 默纳克系统服务器看平衡系数,默纳克启动停车舒适感调整
- Struts2 多方法的Action
- 读Cookie安全后的读后感
- Android上SQLite的性能优化问题
- 程序内购买 图文攻略
- android qq 微信绑定,QQ或微信互联快捷登录怎么绑定微信提醒?
- java计算机毕业设计南京新东方学校家校通系统源码+程序+lw文档+mysql数据库
- 病毒+蠕虫+bot+rootkit
- 刘霞:“手艺人鞋吧”圆了创业梦_创业时代_科技时代_新浪网
- ESP8266连接阿里云--MQTT协议
- scare机器人如何手眼标定_Epson四轴机器人的手眼标定(原理并附上halcon代码)...
- 视频播放器源码(WinForm)
- odoo15全面解决财务应收应付全面管理方案(含银企直联)(1)
- Java状态码枚举类
热门文章
- [机缘参悟-39]:鬼谷子-第五飞箝篇 - 警示之二:赞美的六种类型,谨防享受赞美快感如同鱼儿享受诱饵。
- 聊聊微服务架构中的多级缓存设计
- MySQL数据库基本命令
- All the Windows 10 Technical Preview Editions ISO Direct Download Links !
- python excel模板 生成excel表格_python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图...
- 小时代3刺金时代好看吗?
- 今日头条测试开发实习生面试
- dell win10忘记密码怎么办
- Secret-Key Encryption Lab网安实验
- 2021年三亚旅游行业发展现状分析:旅游总收入达747.03亿元,占GDP的89.43%[图]