使用脚本在编译时拉取组件的 Zod 描述
此功能允许你以类型安全的 "Zod" 描述形式获取组件的描述，它为你的内容提供以 TS 为先的模式验证和静态类型推断。
要拉取我们的 Zod 模式，我们将加载一些依赖项，并创建一个脚本，该脚本使用来自 cms-renderer 的一些实用工具
让我们从项目结构开始
apps/
web/
app/
page.tsx
scripts/
generate-schemas.ts // 这是脚本所在的位置
现在我们将编辑这个 generated-schema.ts 文件
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // 导入我的配置
async function main() {
const { cmsUrl, websiteId, apiKey } = cmsConfig;
if (!cmsUrl) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_CMS_API_URL 未设置。请在你的环境或 .env 文件中设置。'
);
}
if (!websiteId) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID 未设置。请在你的环境或 .env 文件中设置。'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] PROFOUND_API_KEY 未设置。请在你的环境或 .env 文件中设置。'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
if (schemas.length === 0) {
throw new Error(
'[generate-schemas] API 未返回任何组件。请检查 PROFOUND_API_KEY 是否有效并指向正确的网站。'
);
}
await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');
console.log('[generate-schemas] 完成。');
}
main().catch((err) => {
console.error('[generate-schemas] 失败：', err);
process.exit(1);
});
你的 CmsConfig 应该如下所示
export const cmsConfig = {
cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
apiKey: process.env.CMS_API_KEY,
websiteId: '...',
};
在我们的 package.json 中，我们定义了如何运行该脚本以及一些依赖项
注意：如果你没有 tsconfig，那么可以移除
--tsconfig标志及其值
{
"name": "web",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
"...": "..."
},
"dependencies": {
"cms-renderer": "0.3.1",
"zod": "^4.3.6",
"...": "..."
},
"devDependencies": {
"tsx": "^4.21.0",
"object-hash": "^3.0.0",
"...": "..."
}
}
现在，在我们运行以下命令后
$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] 完成。
我们应该得到类似的输出，并且可以在项目结构中看到一个新文件
apps/
web/
app/
page.tsx
scripts/
generated-schema.ts // 这是脚本所在的位置
generated/
cms-schema.ts // 生成的 Zod 模式
你可以打开这个文件查看模式的样子。要更新此文件，你需要再次运行 bun run generate-schemas 命令，你可以将它连接到 dev 或 build 工作流。
然后我们可以像这样将这些 Zod 对象导入到我们的 page.tsx 文件中
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';
// 调用 petFoodPostSchema.parse(obj) 对对象进行类型安全的解析
你可以在管理面板中更新组件，再次拉取更新后的模式，从而轻松开发。