代码片段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/ExampleBlock

npm install

npm 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 相关命令会使用该字段。

8e7797af-a3fc-4961-9a88-4a67ef99c65g.gif

私有化数据托管

对于私有化，物料中心是无法使用的，需要我们自己将前文说到的build目录下看到materials.json文件以npm的形式，上传到内部的npm包环境下，并通过unpkg的形式拿到静态资源，在将改地址复制到Appworks下即可使用。

私有化也大功告成。

整体开发流程图

image.png

写在最后

在现有代码进行开发抽离的时候，我们对于现有的

公共类型定义types、公共变量、公共组件

之类的东西，需要注意，需要进行合理的处理，不然将会出现代码冗余，这样将会丧失物料库的意义，这里，还需要好好想一下。

如果有什么疑问，欢迎评论区！！！

感谢看到这里！！！

97fc0ffcee6c80701b361ff8b7a8cbe3.gif

---

关于本文

来自：前端开发江鸟

https://juejin.cn/post/7100491418929463310

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持