Why use a fly ice library

In daily development, the logic, style, and interaction of the front-end all have something in common. For these same logic, same interaction, same style specification, we already have style component library, business component library and antd style theme package.

Although the existing component libraries and theme packages have helped us save a lot of time and greatly improved our development efficiency.

However, the existing library or package corresponds to only one component and one style. For an entire identical or similar public interactive page, our current method is still in progress ctrl c + ctrl v.

In this regard, I have been thinking about whether there is a more concise and efficient method. After researching the fly ice material library, I found that it is a good implementation method.

What is a fly ice warehouse

First of all, we need to know that FeiBing is not equal to the FeiBing material library. FeiBing is a React-based R&D solution that includes multiple functions, and the material library is only a part of it.

Materials are divided into three types: components, blocks, and items:

Components: Components we use every day, such as Doraemon;

Block: It is generally a UI module. When using a block, the block code will be copied to the project code in the form of a new component in the form of a component. We can further make any changes to the block code;

Project Template: Project scaffolding for project initialization.

Because of our needs, only blocks are currently considered.

Use material library

Plugin installation

Open VS Code and make sure the AppWorks plugin collection is installed(opens new window)

An extension pack that provides multiple functions, such as code completion, code information hints and code refactoring, and the use of material libraries that we care about.

Visual development

AppWorks provides a large number of materials to improve our daily development efficiency. We can use templates to quickly create projects; we can use the materials panel to add some materials to the currently developing project.

Rich material resources

Of course, if the existing materials cannot meet our needs, AppWorks also provides a complete set of processes for developing our own materials, and we can create our own material library. And because many companies will build private npm, if they need to build privatized materials, they also provide corresponding solutions.

Material development

Before development, install the CLI globally

npm install @appworks/cli -g

# 检查是否安装成功

appworks -V 

# V 大写
复制代码

Initialize the project

Create a new project to execute

# 创建自己的项目目录并进入到对应目录

mkdir my-material && cd my-material

# 执行脚手架

appworks init
复制代码

Execute scaffolding instructions

根据需求，在执行脚手架的时候，类型选择，我们选择带区块的,其他选项，根据个人需要自定义即可。

脚手架生成项目结构

目录结构

通过结构查看，我们发现其内置了一个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 相关命令会使用该字段。

Private data hosting

For privatization, the material center cannot be used. We need to upload the materials.json file seen in the build directory mentioned above to the internal npm package environment in the form of npm, and get the static file in the form of unpkg. Resource can be used after copying the address to Appworks.

Privatisation is also a success.

Overall development flow chart

write at the end

When the existing code is developed and extracted, we

public types define types, public variables, public components

Such things need attention and need to be handled reasonably, otherwise there will be code redundancy, which will lose the meaning of the material library. Here, you need to think about it.

If you have any questions, please feel free to comment! ! !

Thanks for seeing here! ! !