为什么使用飞冰物料库
日常开发中,前端的逻辑、样式和交互都有共同点。为了这些相同的逻辑、相同的交互,相同的样式规范,我们已经有了样式组件库,业务组件库和antd的样式主题包。
虽然目前已有的组件库和主题包已经帮助我们节省了不少的时间,大大提升了我们的开发效率。
但目前已有的库或者包,所对应的仅仅是一个组件、一个样式。对于一整个相同或者相似的公共交互页面,我们目前的方法仍还是进行ctrl c + ctrl v
。
对此,我一直在思考是否有更加简洁、高效的办法,经过对飞冰物料库进行调研,发现是一个不错的实现方式。
什么是飞冰物料库
我们首先要知道,飞冰不等于飞冰物料库,飞冰是一个基于 React 的研发解决方案,包含多种功能,物料库只是其中一部分。
物料分为组件、区块、项目三种类型:
组件:我们日常使用的组件,如Doraemon;
区块:一般是一个UI模块,使用区块时会将区块代码通过新建component的形式以组件的形式拷贝到项目代码中,我们可以进一步的对区块代码进行任何改动;
项目模板:项目脚手架,用于项目初始化。
因为我们的需求,目前只考虑区块。
使用物料库
插件安装
打开 VS Code,确定已经安装了 AppWorks 插件集合 \(opens new window\)[1]
![e6c47ea97b63d65d5788dcc26f1fc47a.png](https://i-blog.csdnimg.cn/blog_migrate/acb9e687290ba4b45ac068ae3c6e6bf6.png)
一个扩展包,提供了多个功能,如代码补全、代码信息提示和代码重构以及我们关心的物料库使用。
可视化开发
AppWorks 提供了海量的物料的来提升我们的日常开发效率。我们可以使用模板快速创建项目;可以使用物料面板,将一些物料添加到当前开发的项目中。
![outside_default.png](https://i-blog.csdnimg.cn/blog_migrate/35b9026e4bda3df223cecc228e5e9313.png)
![4f06ab7592456ae4a6ebe9521e1224d1.png](https://i-blog.csdnimg.cn/blog_migrate/bdfcfe39d465e007584eb1baee8b3374.png)
丰富的物料资源
当然,如果已经有的物料不能满足我们的需求,AppWorks 还提供了开发自己物料的一整套流程,我们完全可以打造属于自己的物料库。并且因为很多公司会搭建私有的 npm,因此如果需要建设私有化的物料,其还贴心提供了相应的解决方案。
物料开发
开发前,先全局安装CLI
npm install @appworks/cli -g
# 检查是否安装成功
appworks -V
# V 大写
复制代码
![41b6b1b8f0277025766b893a8775d6b9.png](https://i-blog.csdnimg.cn/blog_migrate/717eab20f185a49dabaf4023423df06c.png)
初始化项目
新建一个项目执行
# 创建自己的项目目录并进入到对应目录
mkdir my-material && cd my-material
# 执行脚手架
appworks init
复制代码
![9ca160377aea0e367ca90945442e447b.png](https://i-blog.csdnimg.cn/blog_migrate/105747f6a818d2370b977ef1ecdfc33b.png)
执行脚手架指令
根据需求,在执行脚手架的时候,类型选择,我们选择带区块的,其他选项,根据个人需要自定义即可。
脚手架生成项目结构
![61ea194e91df410fbd9c9d02cd921a8e.png](https://i-blog.csdnimg.cn/blog_migrate/c67a7d1ff976c5ee1c2be68a51d10085.png)
目录结构
通过结构查看,我们发现其内置了一个demo供我们开发参考,所以我们可以根据提示,先安装整个项目依赖,安装完成后,再进入到区块,安装区块的依赖,然后进行demo查看。
#安装全局依赖
npm install
# 安装区块依赖,并运行
cd blocks/ExampleBlock
npm install
npm start
复制代码
![c565219abedba6820b200187554838cc.png](https://i-blog.csdnimg.cn/blog_migrate/1c244b55c48ca2871723015b5beef843.png)
执行start结果
物料区块开发
我们新加一个JiangNiaoTest区块,我们在项目根目录执行
appworks add
# 或者
appworks add block
复制代码
![0af2857ca6b16c415fbe4b7ca3dc3ddc.png](https://i-blog.csdnimg.cn/blog_migrate/aee9cd87845cbbfe3423bf54a81beac7.png)
![bf8c65dcb1ac3a7041dee5916b6f3858.png](https://i-blog.csdnimg.cn/blog_migrate/bcb3167a971e3d4b01cb56859124005f.png)
![de2f097d8563618fb7cb96cd61f5b130.png](https://i-blog.csdnimg.cn/blog_migrate/1eac0d0c7f00bea64058af922d20cc4f.png)
接下来的操作,我们仅仅需要按照平时开发代码一样,写自己的代码就可以了(如何产出优雅高效的区块,这里还需要讨论和实践,不做过多阐述)。代码开发完成后,我们需要对npm进行发布。
物料数据生成
将每个区块搞定之后,我们只需要返回到项目根目录,执行
appworks generate
复制代码
马上,你会在build目录下看到materials.json文件,打开文件,将会发现,这个文件描述了刚开发的整个物料集合。
物料数据发布与使用
在进行物料数据发布之前,我们需要先注册自己的物料站点,该站点需要我们用淘宝账号注册。
物料中心账号注册或者登录[2]
成功后
![50ecf20f1d1d060a258c22b240aad4c9.png](https://i-blog.csdnimg.cn/blog_migrate/31a0dd329030ba3be04868cc3ae47f09.png)
物料中心
创建站点[3]
![d9574d71b6333482e8204f52938e5bd6.png](https://i-blog.csdnimg.cn/blog_migrate/9ca7641a64200ee31e94e8a1774849a5.png)
物料站点
创建成功后记录自己的token,用于发布物料
![572988ed872133abe961b53e59e3e320.png](https://i-blog.csdnimg.cn/blog_migrate/ecf1f24fab188d3c282471bf7f119fd2.png)
![9fe422e5652b09e372ed2c221643d1ca.png](https://i-blog.csdnimg.cn/blog_migrate/22557137f96b45c707e565c4af2d7b15.png)
个人物料资源
站点注册完成后,我们就可以在项目根目录执行appworks sync,
在这里,它会让你输入你刚刚生成的站点token,token正确后,就会出现自己设置的站定名字
![2ce741af7de145581359e8a9f32d7d69.png](https://i-blog.csdnimg.cn/blog_migrate/a35d63353a3bbe48aaf5141dbb1f107a.png)
上传成功后,会得到一个链接
![98e6211f4d5eeab88e52ef8f014cf1fa.png](https://i-blog.csdnimg.cn/blog_migrate/5cdfb728b73d666a58ed23838303dec1.png)
我们拿到这个链接,在前面提到的Appworks的vscode插件中
![11df035ba85da78318bb31a08534b686.png](https://i-blog.csdnimg.cn/blog_migrate/cd1f71640acdb5339e8a462916b900e7.png)
使用自己的物料
一系列操作之后,大功告成,可以使用了。
注意:我们这里配置的区块,而直接打开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 相关命令会使用该字段。
![outside_default.png](https://i-blog.csdnimg.cn/blog_migrate/35b9026e4bda3df223cecc228e5e9313.png)
私有化数据托管
对于私有化,物料中心是无法使用的,需要我们自己将前文说到的build目录下看到materials.json文件以npm的形式,上传到内部的npm包环境下,并通过unpkg的形式拿到静态资源,在将改地址复制到Appworks下即可使用。
![89c23fb91a7fe54eeaf2ba6746adc238.png](https://i-blog.csdnimg.cn/blog_migrate/f7963ea0a40ceb267ad7e3b29d3dca16.png)
![591438a53be69fbc2e11dcd41582d86a.png](https://i-blog.csdnimg.cn/blog_migrate/a42a81df5a80c15b59287118130dfa31.png)
私有化也大功告成。
整体开发流程图
![5414602dc6771ebade859a0693e57802.png](https://i-blog.csdnimg.cn/blog_migrate/fbfeeb1be579717a178341b51031cf1d.png)
写在最后
在现有代码进行开发抽离的时候,我们对于现有的
公共类型定义types、公共变量、公共组件
之类的东西,需要注意,需要进行合理的处理,不然将会出现代码冗余,这样将会丧失物料库的意义,这里,还需要好好想一下。
如果有什么疑问,欢迎评论区!!!
感谢看到这里!!!
![a1c0419fb3ed021728f44fdd197249b0.png](https://i-blog.csdnimg.cn/blog_migrate/71839af9c91b299b1b5a307e759e180c.png)
关于本文
来自:前端开发江鸟
https://juejin.cn/post/7100491418929463310
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持