如何基于标准Directus interfaces开发自定义接口并解决构建报错

核心实现思路 #

Directus扩展构建工具默认会将所有@directus/前缀的官方依赖标记为运行时外部依赖，无需你手动引入全量Directus源码包，运行时会直接从宿主实例加载对应模块，完美规避之前的导入报错问题。

具体操作步骤 #

• 扩展开发仅需安装@directus/extensions-sdk作为开发依赖，无需额外引入Directus tarball包，也不需要自定义vue.config.js配置
• 复用内置接口时直接从@directus/interfaces包导入对应模块即可，例如引用file-image接口的写法为：import FileImage from '@directus/interfaces/file-image/index.js'
• 自定义逻辑可通过Vue组件继承、混入、插槽覆盖等方式修改内置接口的功能和样式，无需从零重写全量代码
• 开发完成后直接执行directus-extension build命令即可完成构建，工具会自动处理所有官方模块的引用映射

常见构建报错处理 #

如果执行build命令时依然出现导入报错，按以下规则排查：

• 确认你安装的@directus/extensions-sdk版本与要适配的Directus实例版本一致，版本差超过2个小版本极易出现依赖引用不匹配的问题
• 不要直接引用@directus/app源码目录下的私有文件，所有可复用的内置接口均已封装在@directus/interfaces包下，仅从该包引入即可
• 检查自定义代码中是否引用了Directus不对外暴露的私有模块，私有模块不会被标记为外部依赖，会直接触发找不到模块的构建错误

内容的提问来源于stack exchange，提问作者Cem Kaan