Directus 扩展脚手架完全指南使用 create-directus-extension 一键生成接口、Hook、Bundle 等扩展项目【免费下载链接】directusThe flexible backend for all your projects Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth more.项目地址: https://gitcode.com/GitHub_Trending/di/directusDirectus 提供了一款官方脚手架工具create-directus-extension它能够在几秒内为你搭建出一个结构完整、可直接开发与构建的 Directus 扩展工程。本文以该包在仓库内的实现为据系统讲解其安装方式、交互式与非交互式两种使用模式、语言与依赖安装选项的底层行为以及各类扩展类型的适用场景帮助你用一行命令快速启动自己的扩展开发之旅。一、这个工具是什么create-directus-extension是仓库packages/create-directus-extension目录下的一个小型命令行工具官方描述为 A small util that will scaffold a Directus extension一个用于搭建 Directus 扩展的小工具。从源码来看它自身并不直接生成文件而是做了两件事的分工解析命令行参数与交互问答入口见 lib/index.js把用户输入交给directus/extensions-sdk的 CLIcreate命令完成实际的文件生成extensions-sdk 的 create.ts 负责落盘模板并初始化工程。因此要理解它只需把握一条主脉络本工具负责问清楚你要什么extensions-sdk 负责把工程建出来。同时它从directus/extensions导入了合法的扩展类型与语言清单保证用户的选择永远落在官方支持范围内。二、安装与运行方式该包被设计为通过npm或yarn直接运行无需预先安装到本地项目里# npm / npx npx create-directus-extension # yarn yarn create directus-extension从 package.json 的bin字段可以看到安装后它同时暴露两个可执行命令create-directus-extensioncde更简短的三字母别名也就是说若你在本地安装了该包也可以直接用cde来触发同样的脚手架流程。无论以哪种方式调用最终都会进入 lib/index.js 的run()函数经由commander解析参数再由inquirer处理交互问答。三、交互式创建不带参数直接运行直接不带任何参数运行是最省心的方式工具会通过向导式问答逐步引导你完成配置npx create-directus-extension依据 lib/index.js 的实现交互流程会依次提出 4 个问题Choose the extension type列表选择在官方支持的全部扩展类型中选择一种Choose a name for the extension文本输入填写扩展名称Choose the language to use列表选择选择 JavaScript 或 TypeScript —— 注意该问题只在类型不是 bundle 时出现Auto install dependencies?确认默认true是否自动安装依赖。前两个问题结束后会输出一句引导提示This utility will walk you through creating a Directus extension.。当你完成全部问答后工具会把你的回答原样传递给底层create(type, name, { language, install })执行真正的工程生成。对应的单元测试见 lib/index.test.js其中完整断言了这 4 个提问的名称、类型、文案与可选值并验证了交互答案会正确传递到create函数。四、非交互式创建直接传入类型与名称如果你已明确要创建什么可以跳过交互问答直接用位置参数声明扩展类型与名称npx create-directus-extension interface my-interface这种模式下 CLI 参数格式为create-directus-extension type name。参考 lib/index.js非交互逻辑遵循以下规则必须同时提供type与name。若只给了类型而缺少名称工具会直接报错退出Missing required argument name. Run without arguments for interactive mode.对应测试见 index.test.js语言默认值为javascript。当未通过--language指定语言时非交互模式下自动回退到 JavaScript见 index.jsbundle 类型不参与语言选择。若类型为 bundle工具会忽略语言选项传undefined因为 Bundle 本身只是打包容器不包含独立代码语言由其中嵌套的子扩展决定。搭配可选参数使用你还可以组合--language与--no-install两个选项让命令一次性完成指定语言 跳过依赖安装npx create-directus-extension hook my-hook --language typescript --no-install命令行定义来自commander的两处声明lib/index.js选项说明默认行为-l, --language language指定扩展使用的语言非交互模式默认javascript--no-install创建后跳过依赖安装默认会执行依赖安装install: true这里有一个值得注意的 commander 语义定义--no-install后读取到的选项字段名为install值为布尔型。--no-install使install变为false不带该选项时install为true。源码正是把options.install直接作为依赖安装开关传入底层createlib/index.js。相关的非交互行为均有测试覆盖hook my-hook --language typescript会以language: typescript创建index.test.jsinterface my-interface --no-install会以install: false创建index.test.jsbundle my-bundle --language typescript会被强制忽略语言index.test.js。五、支持哪些扩展类型与语言工具在问答中提供的可选项并非硬编码而是从directus/extensions导入的常量其真实取值定义在packages/constants/src/extensions.ts中。所有合法类型如下类型所属类别运行环境适用场景interfaceAppAdmin 前端自定义数据录入控件displayAppAdmin 前端自定义字段展示形式layoutAppAdmin 前端自定义集合内容布局视图moduleAppAdmin 前端自定义侧边栏功能模块panelAppAdmin 前端自定义 Insights 仪表盘面板themeAppAdmin 前端自定义界面主题hookAPI服务端订阅事件、在生命周期内执行逻辑endpointAPI服务端自定义 REST 接口operationHybrid服务端自定义 Flow 流程操作节点bundleBundle全栈打包分发多个子扩展其中App 类interface、display、layout、module、panel、theme运行于管理后台前端API 类hook、endpoint运行于服务端Hybrid 类operation同时涉及前后端Bundle 类bundle用于聚合发布多个扩展。语言选项同样来自官方常量EXTENSION_LANGUAGES [javascript, typescript]定义见 packages/extensions/src/shared/constants/languages.ts。这解释了交互式流程中语言列表为什么只有这两项也解释了为什么 bundle 类型的语言提示会被隐藏——该分支判断正是BUNDLE_EXTENSION_TYPES.includes(type) falselib/index.js测试中对when({ type: bundle })返回false、when({ type: interface })返回true做了明确验证index.test.js。六、脚手架背后的工程化细节把工具创建出的工程点亮还需要了解几个与生成结果直接相关的细节依赖安装默认开启。无论交互模式默认回答true还是非交互模式install默认均为true即脚手架创建完工程后会紧接着为你安装依赖通常是npm install。若在 CI 或只想先看目录结构务必加上--no-install。生成与后续开发无缝衔接。底层负责实际生成的是directus/extensions-sdk的create命令create.ts它会从官方模板目录拷贝工程骨架。完成创建后你得到的目录即是一个可直接用npx directus-extension build同属 extensions-sdk CLI进行构建与调试的完整扩展项目。测试保证行为稳定。本包内置了基于 Vitest 的完整测试集运行命令见 package.json 中的test脚本核心用例都集中在 lib/index.test.js通过 mockinquirer与directus/extensions-sdk/cli覆盖了交互问答、参数直传、默认语言、缺参报错、--no-install、bundle 语言省略等全部关键路径可作为你理解各模式行为的可执行文档。七、快速上手总结最后把几种最常用的创建姿势汇总如下# 1. 交互式跟随向导选择类型、名称、语言并安装依赖 npx create-directus-extension # 2. 非交互式创建 interface 类型扩展默认 JavaScript npx create-directus-extension interface my-interface # 3. 非交互式创建 TypeScript 编写的 hook 扩展并跳过依赖安装 npx create-directus-extension hook my-hook --language typescript --no-install # 4. 创建 bundle 扩展Bundle 无语言选择语言参数会被忽略 npx create-directus-extension bundle my-bundle # 5. yarn 用户同样支持 yarn create directus-extension记住两条关键规则非交互模式下类型与名称必须成对出现bundle 扩展没有语言维度。掌握这些之后无论你想写一个自定义字段接口interface、一个订阅事件的 hook还是一个聚合多个扩展的 bundle都能用一条命令立即获得规范的工程骨架把精力直接投入到扩展本身的业务逻辑中去。【免费下载链接】directusThe flexible backend for all your projects Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth more.项目地址: https://gitcode.com/GitHub_Trending/di/directus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考