在低代码开发中，物料（Components）是构建应用的核心资源。传统手动导入物料的方式存在效率低下、版本混乱、协作困难等痛点，而TinyEngine的物料自动导入工具通过自动化脚本与CI/CD集成，可实现物料的一键导入与版本管理，显著提升开发效率。本文将从技术准备、核心实现、进阶用法三个维度，手把手教你玩转TinyEngine物料自动导入。
一、技术栈准备：工具链与规范先行
1.1 环境配置
Node.js：建议使用v20.19.5+版本（原生支持fetch与ES6+语法）。
包管理工具：推荐pnpm（依赖安装更快，占用空间更小）。
版本控制：Git（用于物料版本管理与团队协作）。
开发工具：VSCode（代码编辑）、Chrome浏览器（预览调试）。
1.2 物料标准化规范
在项目根目录创建material-config/文件夹，统一管理物料元数据：
material-config/
├── button/ # 按钮组件目录
│ ├── meta.json # 组件配置（必选）
│ ├── preview.png # 预览图（可选，尺寸统一400x300）
│ └── demo.vue # 示例代码（可选）
├── input/ # 输入框组件目录
└── material.manifest.js # 物料清单文件（自动生成）
meta.json关键字段：
json
{
"name": "my-button", // 组件名（kebab-case命名法）
"type": "button", // 组件类型
"props": { // 属性定义
"size": {
"type": "enum",
"options": ["small", "medium", "large"]
}
}
}
二、核心实现：自动化脚本与可视化操作
2.1 自动导入脚本开发
使用Node.js编写import-materials.js脚本，实现物料清单生成与TinyEngine导入：
javascript
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
// 生成物料清单
function generateManifest() {
const dirs = fs.readdirSync('./material-config');
const materials = dirs.map(dir => ({
name: dir,
path: ./material-config/${dir}/meta.json
}));
fs.writeFileSync('./material-config/material.manifest.js',
module.exports = ${JSON.stringify(materials, null, 2)};);
}
// 执行TinyEngine导入命令
function importToTinyEngine() {
try {
execSync('tinyengine import --manifest ./material-config/material.manifest.js');
console.log('✅ 物料导入成功');
} catch (error) {
console.error('❌ 导入失败:', error.message);
}
}
// 主流程
generateManifest();
importToTinyEngine();
增强功能：
预览图压缩：使用sharp库自动压缩图片。
JSON校验：通过ajv库校验meta.json格式。
多环境配置：开发/生产环境物料隔离（如material-config/dev/、material-config/prod/）。
2.2 与Git工作流集成
在.githooks/pre-commit中添加校验逻辑，确保提交前物料格式正确：
bash
!/bin/sh
node ./import-materials.js --dry-run
if [ $? -ne 0 ]; then
echo "❌ 物料校验失败，请修复后再提交"
exit 1
fi
版本标记：通过git tag实现物料版本管理（如git tag v1.0.0）。
2.3 可视化操作闭环（进阶）
若需更直观的物料管理，可部署TinyEngine官方提供的可视化工具：
技术栈：
后端：Node.js + Express（接口服务）、MySQL（物料存储）、Puppeteer（URL爬取）、LLM SDK（API提取）。
前端：Vue 3.2 + Vite 4.0（构建工具）、OpenTiny Vue（UI组件库）。
核心功能：
动态导入表单：根据URL/NPM/源码类型自动切换表单字段。
任务进度可视化：实时展示导入进度与状态（成功/失败）。
物料预览与编辑：支持属性、事件、插槽的在线编辑与保存。
三、进阶用法：CI/CD自动化与常见问题解决
3.1 CI/CD自动化（GitHub Actions示例）
创建.github/workflows/material-sync.yml，实现物料库自动同步：
yaml
name: MaterialSync
on:
push:
paths:
- 'material-config/**'
jobs:
import:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with: { node-version: '16' }
- run: npm install -g @tinyengine/cli
- run: node import-materials.js
- name: Notify Team
uses: some-notification-action # 通知团队（如钉钉/飞书）
适用场景：
物料库自动同步到测试环境。
每日定时构建检查物料健康度。
