mcpField
A
add-new-package

add-new-package

github.com/remotion-dev开发68.6k800 次安装今天更新
代码仓库

关于 add-new-package

介绍如何向 Remotion 单体仓库添加软件包的技能，供维护者参考。内容涵盖包配置、仓库注册、文档、示例、依赖安装和构建。

主要功能

  1. 01配置软件包文件与构建
  2. 02在单体仓库中注册软件包
  3. 03更新文档与侧边栏
  4. 04集成示例项目
  5. 05安装依赖并构建

适用场景

  1. 01添加新的 Remotion 软件包
  2. 02在 CLI 和 Studio 中注册软件包
  3. 03准备软件包文档与示例

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remotion-dev/remotion --skill add-new-package

安装后在 Claude Code 中输入/add-new-package确认已加载。

详细介绍

添加新的 Remotion 包

步骤

  1. 创建 packages/<name>/，并添加以下文件：

    • package.json — 以 @remotion/light-leaks 为模板；更新名称、描述、主页和依赖项
    • tsconfig.json — 继承 ../tsconfig.settings.json，使用原生 TypeScript 编译器，并设置 emitDeclarationOnly: true、outDir: "dist"、module: "es2020"、moduleResolution: "bundler"、target: "ES2022"
    • src/index.ts — 导出内容
    • bundle.ts — Bun 构建脚本，将 react、remotion、remotion/no-react、react/jsx-runtime、react/jsx-dev-runtime、react-dom 设为外部依赖
    • eslint.config.mjs — 如果使用 React，则用 remotionFlatConfig({react: true})；否则用 {react: false}
    • .npmignore — 以 @remotion/light-leaks 为模板
    • README.md — 包名称、描述、安装命令和文档链接

  2. 在 monorepo 中注册：

    • 根目录的 tsconfig.json — 在 references 中添加 {"path": "./packages/<name>"}
    • packages/cli/src/list-of-remotion-packages.ts — 添加 '@remotion/<name>'
    • packages/create-video/src/list-of-remotion-packages.ts — 添加 '@remotion/<name>'
    • packages/studio-shared/src/package-info.ts — 将其添加到 packages、descriptions、installableMap、apiDocs

  3. 文档（packages/docs/docs/<name>/）：

    • 在 packages/docs/package.json 的 dependencies 中添加 "@remotion/<name>": "workspace:*"（twoslash 代码片段需要此依赖）
    • index.mdx — 安装选项卡、目录、许可证
    • table-of-contents.tsx — 添加指向组件／函数页面的 TOCItem 网格
    • 各个组件／函数的 .mdx 页面
    • 编辑 packages/docs/sidebars.ts — 添加分类
    • 编辑 packages/docs/components/TableOfContents/api.tsx — 导入目录并添加章节

编写文档的详细信息，请参阅 writing-docs 技能。

  1. 示例用法：

    • 在 packages/example/package.json 中添加 "@remotion/<name>": "workspace:*"
    • 创建 packages/example/src/<Name>/index.tsx
    • 在 packages/example/src/Root.tsx 中注册 <Composition>
    • 在 packages/example/tsconfig.json 的 references 中添加 {"path": "../<name>"}

  2. 运行 bun i 以安装依赖项

  3. 构建： cd packages/<name> && bun run make

版本

使用 packages/core/src/version.ts 中的当前版本。
对于文档版本，将补丁版本号加 1，因为它只会随下一次 Remotion 发布一起发布。

模式

  • 内部依赖使用 "workspace:*"
  • 共享的外部依赖版本使用 "catalog:"
  • make 脚本为：tsc && bun --env-file=../.env.bundle bundle.ts
  • 在 package.json 中添加 "type": "module"
  • 在 devDependencies 中添加 "typescript": "catalog:"。这会安装包构建所用的原生 TypeScript 编译器。
  • Types/main 指向 dist/index.d.ts 和 dist/index.js（而不是 dist/cjs/）
  • 含有 React 组件的包需要在 peerDependencies 中声明 react 和 react-dom

评论

支持 Markdown