¿Por qué usar una biblioteca de hielo volador?
En el desarrollo diario, la lógica, el estilo y la interacción del front-end tienen algo en común. Para esta misma lógica, misma interacción, misma especificación de estilo, ya tenemos una biblioteca de componentes de estilo, una biblioteca de componentes de negocios y un paquete de temas de estilo antd.
Aunque las bibliotecas de componentes y los paquetes de temas existentes nos han ayudado a ahorrar mucho tiempo y han mejorado enormemente nuestra eficiencia de desarrollo.
Sin embargo, la biblioteca o paquete existente corresponde a un solo componente y un estilo. Para una página interactiva pública idéntica o similar, nuestro método actual todavía está en progreso ctrl c + ctrl v.
En este sentido, he estado pensando si existe un método más conciso y eficiente.Después de investigar en la biblioteca de materiales de fly ice, descubrí que es un buen método de implementación.
¿Qué es un almacén de hielo volador?
En primer lugar, debemos saber que FeiBing no es igual a la biblioteca de materiales de FeiBing. FeiBing es una solución de I+D basada en React que contiene múltiples funciones, y la biblioteca de materiales es solo una parte de ella.
Los materiales se dividen en tres tipos: componentes, bloques y elementos:
Componentes: Componentes que usamos todos los días, como Doraemon;
Bloque: generalmente es un módulo de interfaz de usuario. Al usar un bloque, el código del bloque se copiará en el código del proyecto en forma de un nuevo componente en forma de componente. Además, podemos realizar cualquier cambio en el código del bloque;
Plantilla de proyecto: andamiaje de proyecto para la inicialización del proyecto.
Debido a nuestras necesidades, actualmente solo se consideran bloques.
Usar biblioteca de materiales
Instalación de complementos
Abra VS Code y asegúrese de que la colección de complementos de AppWorks esté instalada (se abre en una ventana nueva)
Un paquete de extensión que proporciona múltiples funciones, como completar código, sugerencias de información de código y refactorización de código, y el uso de bibliotecas de materiales que nos interesan.
Desarrollo visual
AppWorks proporciona una gran cantidad de materiales para mejorar nuestra eficiencia de desarrollo diario. Podemos usar plantillas para crear proyectos rápidamente; podemos usar el panel de materiales para agregar algunos materiales al proyecto en desarrollo actual.
Ricos recursos materiales
Por supuesto, si los materiales existentes no pueden satisfacer nuestras necesidades, AppWorks también proporciona un conjunto completo de procesos para desarrollar nuestros propios materiales y podemos crear nuestra propia biblioteca de materiales. Y debido a que muchas empresas construirán npm privadas, si necesitan construir materiales privatizados, también brindan las soluciones correspondientes.
Desarrollo de materiales
Antes del desarrollo, instale la CLI globalmente
npm install @appworks/cli -g
# 检查是否安装成功
appworks -V
# V 大写
复制代码Inicializar el proyecto
Crear un nuevo proyecto para ejecutar
# 创建自己的项目目录并进入到对应目录
mkdir my-material && cd my-material
# 执行脚手架
appworks init
复制代码Ejecutar instrucciones de scaffolding
根据需求，在执行脚手架的时候，类型选择，我们选择带区块的,其他选项，根据个人需要自定义即可。
脚手架生成项目结构
目录结构
通过结构查看，我们发现其内置了一个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 相关命令会使用该字段。
Alojamiento de datos privados
Para la privatización, no se puede usar el centro de materiales. Necesitamos cargar el archivo materials.json que se ve en el directorio de compilación mencionado anteriormente en el entorno interno del paquete npm en forma de npm, y obtener el archivo estático en forma de unpkg. se puede usar después de copiar la dirección a Appworks.
La privatización también es un éxito.
Diagrama de flujo de desarrollo general
escribir al final
Cuando se desarrolla y extrae el código existente,
tipos públicos definen tipos, variables públicas, componentes públicos
Tales cosas necesitan atención y deben manejarse de manera razonable, de lo contrario, habrá redundancia de código, lo que perderá el significado de la biblioteca de materiales.
Si tiene alguna pregunta, ¡no dude en comentar! ! !
¡Gracias por ver aquí! ! !
Recursos de referencia: