插件创建
页面摘要: Plugin SDK 无需 Strapi 项目即可生成插件,并通过
watch:link和 yalc 将其链接到现有应用。本文档包含用于打包插件以发布到 npm 或 Marketplace 的构建与验证命令,以及有关 monorepo 和本地设置的信息。
创建 Strapi 5 插件的方法有很多,但最快且推荐的方式是使用 Plugin SDK。
Plugin SDK 是一组围绕插件开发而设计的命令,既可将插件用作本地插件,也可将其发布到 NPM 和/或提交到 Marketplace。
使用 Plugin SDK,你在创建插件之前无需先搭建一个 Strapi 项目。
本指南涵盖从零开始创建插件、将其链接到现有 Strapi 项目以及发布插件。如果你已经有一个现有插件,则可以改造插件设置以使用 Plugin SDK 命令(有关可用命令的完整列表,请参阅 Plugin SDK 参考)。
本指南假设你希望在 Strapi 项目之外开发一个插件。但是,如果你想在现有项目内部开发插件,步骤大体相同。如果你不是 使用 monorepo,步骤则完全一致。
yalc 必须全局安装(使用 npm install -g yalc 或 yarn global add yalc)。
Plugin SDK 入门
Plugin SDK 帮助你创建插件、将其链接到现有 Strapi 项目,并构建它以进行发布。
命令及其参数的完整列表可在 Plugin SDK 参考 中找到。本页将指导你使用主要的命令。
创建插件
要创建你的插件,请确保你位于希望创建插件所在的父目录中,并运行以下命令:
Yarn
yarn dlx @strapi/sdk-plugin init my-strapi-plugin
NPM
npx @strapi/sdk-plugin init my-strapi-plugin
路径 my-strapi-plugin 可以替换为你想要的任何插件名称,包括它应被创建到的路径(例如 code/strapi-plugins/my-new-strapi-plugin)。
你将被引导完成一系列提示,以帮助你设置插件。如果你对所有选项都选择 “是”,最终结构将类似于默认的 插件结构。
将插件链接到你的项目
为了在开发过程中测试你的插件,推荐的做法是将其链接到一个 Strapi 项目。
使用 watch:link 命令将你的插件链接到项目。该命令会输出有关如何将插件链接到 Strapi 项目的说明。
在一个新的终端窗口中,运行以下命令:
Yarn
cd /path/to/strapi/project
yarn dlx yalc add --link my-strapi-plugin && yarn install
NPM
cd /path/to/strapi/project
npx yalc add --link my-strapi-plugin && npm install
在上述示例中,我们在将插件链接到项目时使用了插件的名称(my-strapi-plugin)。这是包的名称,而不是文件夹的名称。
由于此插件是通过 node_modules 安装的,你无需将其显式添加到你的 plugins 配置文件 中,因此运行 develop 命令 启动你的 Strapi 项目时,会自动拾取你的插件。
现在你的插件已链接到项目,运行 yarn develop 或 npm run develop 以启动 Strapi 应用。
你现在可以随心所欲地开发你的插件了!如果你在进行服务端更改,则需要重启服务器以使更改生效。
构建插件以进行发布
当你准备好发布插件时,你需要构建它。为此,运行以下命令:
Yarn
yarn build && yarn verify
NPM
npm run build && npm run verify
上述命令不仅会构建插件,还会验证输出有效且可以发布。之后你可以像发布任何其他包一样,将插件发布到 NPM。
如果你正在从 @strapi/sdk-plugin v5 升级到 v6:
- 删除插件中的任何
packup.config.ts文件(它已不再使用)。 - 依赖
package.json#exports进行构建配置(现在会自动推导)。 - 如果你需要 sourcemap,请向构建命令添加
--sourcemap(现在默认关闭)。
无需其他更改。
如果你需要继续使用带有 @strapi/pack-up 的旧构建系统,可以固定到 5.x 版本:
Yarn
yarn add @strapi/sdk-plugin@5
NPM
npm install @strapi/sdk-plugin@5
SDK 插件的 5.x 版本支持 packup.config.ts 用于自定义构建配置。不过,出于安全更新和简化配置的考虑,推荐使用 v6。
在 monorepo 环境中使用 Plugin SDK {#monorepo}
如果你在 monorepo 环境中开发插件,则无需使用 watch:link 命令,因为 monorepo 工作区设置会处理符号链接。你可以改用 watch 命令。
但是,如果你在编写管理面板代码,可以添加指向插件源代码的 alias,以便在管理面板的上下文中更方便地进行开发:
import path from 'node:path';
export default (config, webpack) => {
config.resolve.alias = {
...config.resolve.alias,
'my-strapi-plugin': path.resolve(
__dirname,
// We've assumed the plugin is local.
'../plugins/my-strapi-plugin/admin/src'
),
};
return config;
};
由于服务端会查看 server/src/index.ts|js 文件来导入你的插件代码,因此你必须使用 watch 命令,否则代码将不会被转译,服务端也将无法找到你的插件。
本地插件的配置
由于 Plugin SDK 主要设计用于非本地插件开发,本地插件的配置需要手动调整。
在本地开发你的插件(使用 @strapi/sdk-plugin)时,你的插件配置文件如下所示:
myplugin: {
enabled: true,
resolve: `./src/plugins/local-plugin`,
},
然而,这种设置有时会导致如下错误:
Error: 'X must be used within StrapiApp';
当你的插件尝试导入 Strapi 核心功能时(例如使用以下方式)经常会出现此错误:
import { unstable_useContentManagerContext as useContentManagerContext } from '@strapi/strapi/admin';
要解决此问题,请从插件的 devDependency 中移除 @strapi/strapi。这可确保插件使用与主应用相同的 Strapi 核心模块实例,从而避免冲突及相关的错误。
在没有 Plugin SDK 的情况下于 monorepo 环境中设置本地插件
在 monorepo 中,你可以通过在插件文件夹的根目录创建 2 个入口点文件,在不使用 Plugin SDK 的情况下配置本地插件:
- 服务端入口点:
strapi-server.js - 管理面板入口点:
strapi-admin.js
这两个文件需要你自己创建:它们不会被自动脚手架生成。使用 Plugin SDK 创建的插件在其根目录没有此类文件,因为 SDK 会在插件的 package.json 中声明 strapi-server 和 strapi-admin 子路径导出,指向 dist/ 中的构建文件。
在没有 Plugin SDK 的情况下,两个入口点都必须是 JavaScript 文件,即使在 TypeScript 项目中也是如此:
- Strapi 通过 Node.js 直接加载本地插件的服务端入口点,而 Node.js 只解析
.js和.json文件。名为strapi-server.ts的入口点在加载时不会被转译,最终解析为一个空插件。 - Strapi 只会查找
strapi-admin.js文件来检测本地插件是否具有管理面板部分。管理面板入口点命名为strapi-admin.ts的插件根本不会在管理面板中加载。
从 strapi-admin.js 导入的文件仍然可以是 TypeScript,因为管理面板构建会编译它们。
服务端入口点
服务端入口点文件初始化你的插件的服务端功能。strapi-server.js 的预期结构如下:
module.exports = () => {
return {
register,
config,
controllers,
contentTypes,
routes,
};
};
在此,你导出一个函数,返回插件的核心组件,例如控制器、路由和配置。有关更多详细信息,请参阅 服务端 API 参考。
管理面板入口点
管理面板入口点文件在 Strapi 管理面板中设置你的插件。strapi-admin.js 的预期结构如下:
export default {
register(app) {},
bootstrap() {},
registerTrads({ locales }) {},
};
该对象包含用于向管理应用注册插件、执行引导操作以及处理翻译的方法。有关更多详细信息,请参阅 管理面板 API 参考。
有关如何在 monorepo 环境中构建本地插件的完整示例,请查看我们的 strapi/strapi 仓库中的示例设置。