Por que usar uma biblioteca de gelo voador
No desenvolvimento diário, a lógica, o estilo e a interação do front-end têm algo em comum. Para essa mesma lógica, mesma interação, mesma especificação de estilo, já temos biblioteca de componentes de estilo, biblioteca de componentes de negócios e pacote de temas de estilo antd.
Embora as bibliotecas de componentes e pacotes de temas existentes tenham nos ajudado a economizar muito tempo e melhorado muito nossa eficiência de desenvolvimento.
No entanto, a biblioteca ou pacote existente corresponde a apenas um componente e um estilo. Para uma página interativa pública idêntica ou semelhante, nosso método atual ainda está em andamento ctrl c + ctrl v.
Nesse sentido, estive pensando se existe um método mais conciso e eficiente.Após pesquisar a biblioteca de materiais de fly ice, descobri que é um bom método de implementação.
O que é um armazém de gelo voador
Antes de tudo, precisamos saber que FeiBing não é igual a biblioteca de materiais FeiBing. FeiBing é uma solução de P&D baseada em React que contém várias funções, e a biblioteca de materiais é apenas uma parte dela.
Os materiais são divididos em três tipos: componentes, blocos e itens:
Componentes: Componentes que usamos todos os dias, como Doraemon;
Bloco: Geralmente é um módulo de interface do usuário. Ao usar um bloco, o código do bloco será copiado para o código do projeto na forma de um novo componente na forma de um componente. Podemos fazer alterações no código do bloco;
Modelo de projeto: scaffolding do projeto para inicialização do projeto.
Devido às nossas necessidades, atualmente apenas os blocos são considerados.
Usar biblioteca de materiais
Instalação do plug-in
Abra o VS Code e verifique se a coleção de plug-ins do AppWorks está instalada (abre uma nova janela)
Um pacote de extensão que fornece várias funções, como conclusão de código, dicas de informações de código e refatoração de código e o uso de bibliotecas de materiais com as quais nos preocupamos.
Desenvolvimento visual
AppWorks fornece um grande número de materiais para melhorar nossa eficiência diária de desenvolvimento. Podemos usar modelos para criar projetos rapidamente; podemos usar o painel de materiais para adicionar alguns materiais ao projeto em desenvolvimento.
Recursos materiais ricos
É claro que, se os materiais existentes não puderem atender às nossas necessidades, o AppWorks também fornece um conjunto completo de processos para desenvolver nossos próprios materiais e podemos criar nossa própria biblioteca de materiais. E porque muitas empresas vão construir npm privado, se eles precisarem construir materiais privatizados, eles também fornecem soluções correspondentes.
Desenvolvimento de materiais
Antes do desenvolvimento, instale a CLI globalmente
npm install @appworks/cli -g
# 检查是否安装成功
appworks -V
# V 大写
复制代码Inicialize o projeto
Criar um novo projeto para executar
# 创建自己的项目目录并进入到对应目录
mkdir my-material && cd my-material
# 执行脚手架
appworks init
复制代码Executar instruções de andaimes
根据需求，在执行脚手架的时候，类型选择，我们选择带区块的,其他选项，根据个人需要自定义即可。
脚手架生成项目结构
目录结构
通过结构查看，我们发现其内置了一个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 相关命令会使用该字段。
Hospedagem de dados privados
Para privatização, o centro de materiais não pode ser usado. Precisamos fazer o upload do arquivo materiais.json visto no diretório de compilação mencionado acima para o ambiente interno do pacote npm na forma de npm e obter o arquivo estático na forma de unpkg. Recurso pode ser usado depois de copiar o endereço para o Appworks.
A privatização também é um sucesso.
Fluxograma de desenvolvimento geral
escreva no final
Quando o código existente é desenvolvido e extraído, nós
tipos públicos definem tipos, variáveis públicas, componentes públicos
Essas coisas precisam de atenção e precisam ser tratadas de forma razoável, caso contrário haverá redundância de código, que perderá o significado da biblioteca de materiais. Aqui, você precisa pensar nisso.
Se você tiver alguma dúvida, sinta-se à vontade para comentar! ! !
Obrigado por ver aqui! ! !
Recursos de referência: