代码片段plus ??? 打工神器: 飞冰物料库

·  阅读 10586

为什么使用飞冰物料库

日常开发中,前端的逻辑、样式和交互都有共同点。为了这些相同的逻辑、相同的交互,相同的样式规范,我们已经有了样式组件库,业务组件库和antd的样式主题包。

虽然目前已有的组件库和主题包已经帮助我们节省了不少的时间,大大提升了我们的开发效率。

但目前已有的库或者包,所对应的仅仅是一个组件、一个样式。对于一整个相同或者相似的公共交互页面,我们目前的方法仍还是进行ctrl c + ctrl v

对此,我一直在思考是否有更加简洁、高效的办法,经过对飞冰物料库进行调研,发现是一个不错的实现方式。

飞书20220522-172455.jpg

什么是飞冰物料库

我们首先要知道,飞冰不等于飞冰物料库,飞冰是一个基于 React 的研发解决方案,包含多种功能,物料库只是其中一部分。

物料分为组件、区块、项目三种类型:

组件:我们日常使用的组件,如Doraemon;

区块:一般是一个UI模块,使用区块时会将区块代码通过新建component的形式以组件的形式拷贝到项目代码中,我们可以进一步的对区块代码进行任何改动;

项目模板:项目脚手架,用于项目初始化。

因为我们的需求,目前只考虑区块。

使用物料库

插件安装

打开 VS Code,确定已经安装了 AppWorks 插件集合 (opens new window)

一个扩展包,提供了多个功能,如代码补全、代码信息提示和代码重构以及我们关心的物料库使用。

可视化开发

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文件,打开文件,将会发现,这个文件描述了刚开发的整个物料集合。

物料数据发布与使用

在进行物料数据发布之前,我们需要先注册自己的物料站点,该站点需要我们用淘宝账号注册。

物料中心账号注册或者登录

成功后

物料中心

创建站点

物料站点

创建成功后记录自己的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


参考资源:

飞冰官网

AppWorks介绍

物料信息

React物料

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改