Remotion 单仓工程实战指南从零创建一个全新的 remotion 包【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本篇指南基于 Remotion 仓库内置的 Agent 技能文档 .agents/skills/add-new-package/SKILL.md完整还原在 Remotion monorepo 中新增一个remotion/*包的全流程从以remotion/light-leaks为模板搭建包骨架到根 tsconfig 注册、CLI 包清单登记、Studio 元信息登记、文档站接入、示例工程集成再到安装与构建。读完后你可以独立完成一个新包从脚手架到可发布状态的全部接线工作。背景为什么要按固定流程加包Remotion 仓库是一个基于 Bun workspace 的 monorepo根package.jsonbun.lock每个功能包独立发布到 npm。新增一个包并非只写代码它同时牵涉TypeScript 项目引用根 tsconfig.json 通过references聚合了上百个子包如 L280 处的{path: ./packages/light-leaks}共享 packages/tsconfig.settings.json 中定义的composite、strict等编译基线发布与版本对齐packages/cli与packages/create-video各自维护一份 Remotion 包清单用于版本管理与脚手架Studio 元信息packages/studio-shared/src/package-info.ts 是 Studio 识别“哪些包可安装、如何描述、文档在哪”的唯一数据源文档站Docusaurus 文档站packages/docs通过sidebars.ts与TableOfContents组件体系组织 API 页面且 twoslash 代码示例依赖 docs 包对目标包的 workspace 依赖。因此 SKILL 文档把流程固化为 6 个步骤加一组约定模式下文逐步骤结合模板包remotion/light-leaks的源码逐项展开。步骤一创建包骨架 packages/name/SKILL 指定以 packages/light-leaks 作为模板包新包目录下需要准备以下 7 个文件package.json、tsconfig.json、src/index.ts、bundle.ts、eslint.config.mjs、.npmignore、README.md。package.json拷贝模板并替换元信息模板 packages/light-leaks/package.json 的关键字段如下以 light-leaks 为例新包需更新name、description、homepage、dependencies{ name: remotion/light-leaks, version: 4.0.520, description: Light leak effects for Remotion, main: dist/index.js, types: dist/index.d.ts, module: dist/esm/index.mjs, repository: { url: https://github.com/remotion-dev/remotion/tree/main/packages/light-leaks }, type: module, scripts: { test: bun test src/test, formatting: oxfmt src --check, format: oxfmt src, lint: eslint src, watch: tsgo -w, make: tsgo bun --env-file../.env.bundle bundle.ts }, license: Remotion License, dependencies: { remotion/effects: workspace:*, remotion: workspace:*, zod: catalog: }, peerDependencies: { react: 16.8.0, react-dom: 16.8.0 }, exports: { .: { types: ./dist/index.d.ts, module: ./dist/esm/index.mjs, import: ./dist/esm/index.mjs }, ./package.json: ./package.json }, devDependencies: { react: catalog:, react-dom: catalog:, remotion/eslint-config-internal: workspace:*, eslint: catalog:, typescript/native-preview: catalog: }, publishConfig: { access: public }, homepage: https://www.remotion.dev/docs/light-leaks }可以从中读出 SKILL “Patterns”一节的真实落点type: module新包统一使用 ESM内部依赖写workspace:*如remotion/effects、remotion共享外部依赖版本写catalog:如zod、react、eslint、typescript/native-preview版本统一由根 workspace catalog 管理main/types指向dist/index.js、dist/index.d.ts不是dist/cjs/类型与入口产物布局固定含 React 组件的包需要peerDependencies声明react与react-domlight-leaks 声明为16.8.0make脚本是tsgo bun --env-file../.env.bundle bundle.ts先用 tsgoTypeScript 原生编译器预览版产出声明文件再用 Bun 打包运行时代码--env-file指向packages/目录下的构建环境变量文件。tsconfig.json只发声明文件运行时代码交给打包器packages/light-leaks/tsconfig.json 全文{ extends: ../tsconfig.settings.json, compilerOptions: { rootDir: src, outDir: dist, jsx: react-jsx, skipLibCheck: true, target: ES2022, module: es2020, moduleResolution: bundler, declaration: true, emitDeclarationOnly: true }, include: [src], references: [{path: ../core}] }SKILL 中列出的每个参数都在这里得到印证extends ../tsconfig.settings.json继承composite/strict/isolatedModules等基线packages/tsconfig.settings.json、emitDeclarationOnly: truetsgo 只生成.d.tsJS 产物全部由bundle.ts负责、outDir: dist、module: es2020、moduleResolution: bundler、target: ES2022。references指向本包依赖的兄弟包light-leaks 依赖core这也是根 tsconfig 项目引用链的一部分。bundle.tsBun 构建脚本与 external 清单packages/light-leaks/bundle.ts 展示了标准打包逻辑核心是对build()的配置import path from path; import {build} from bun; if (process.env.NODE_ENV ! production) { throw new Error(This script must be run using NODE_ENVproduction); } const output await build({ entrypoints: [src/index.ts], naming: [name].mjs, external: [ remotion/effects/light-leak, // 包特有的子路径依赖示例 remotion, remotion/no-react, react, react/jsx-runtime, react/jsx-dev-runtime, react-dom, ], });SKILL 要求的标准 external 清单是react、remotion、remotion/no-react、react/jsx-runtime、react/jsx-dev-runtime、react-dom——框架与 Remotion 核心必须保持外部模块交由消费者项目的打包器解析避免重复打包和版本冲突light-leaks 额外 external 了它依赖的remotion/effects/light-leak子路径说明凡是来自其他 workspace 包的子路径导入也应一并 external。脚本还要求NODE_ENVproduction才允许运行并把产物按[name].mjs命名写入dist/esm/与package.json中exports的import/module条件对齐。其余四个文件src/index.ts包的唯一导出入口。参考 packages/light-leaks/src/index.ts它集中 re-export 组件、effect 函数、schema 与类型如LightLeak、lightLeak、lightLeakEffectSchema是 twoslash 文档示例和bundle.tsentrypoint 的共同入口。eslint.config.mjs复用仓库内部配置。模板 packages/light-leaks/eslint.config.mjs 仅两行有效逻辑import {remotionFlatConfig} from remotion/eslint-config-internal; const config remotionFlatConfig({react: true}); export default {...config};按 SKILL 要求包含 React 组件的包传remotionFlatConfig({react: true})纯逻辑包传{react: false}。.npmignore从 light-leaks 拷贝。packages/light-leaks/.npmignore 排除了src、bundle.ts、tsconfig.json、eslint.config.mjs、*.tgz、.turbo、tsconfig.tsbuildinfo及dist/test/**等——发布物只保留dist产物与元文件。README.md包含包名、描述、安装命令与文档链接参考 packages/light-leaks/README.md。其中安装命令固定为npm install remotion/light-leaks --save-exact精确版本不带^并附一句“所有remotion与remotion/*包需对齐同一版本”——这是 Remotion 生态的强约定新包 README 应原样保留。如果新包带参数组件SKILL 配套的测试习惯可参考packages/light-leaks/src/test/light-leak-component-params.test.ts测试放在src/test/下通过bun test src/test即test脚本运行。步骤二在 monorepo 中登记新包包代码写完后需要在四处登记缺任何一处都会导致工具链不识别该包。1. 根 tsconfig.json在references数组中追加{path: ./packages/name}。当前该数组已列出 100 个包light-leaks位于 L279-L281加入后才能被项目引用构建覆盖。2. packages/cli/src/list-of-remotion-packages.ts追加字符串remotion/namelight-leaks位于该文件 L101。这份清单服务于 CLI 侧的版本/包管理逻辑。3. packages/create-video/src/list-of-remotion-packages.ts同样追加remotion/namecreate-video脚手架在安装依赖时依赖此清单。4. packages/studio-shared/src/package-info.ts需要修改四处以 light-leaks 为参照packages数组中加入light-leaksL103descriptions映射加入短描述L266light-leaks: Light leak effects for RemotioninstallableMap中用shouldReleasePackage({packageName: remotion/light-leaks, ...})登记可安装性L381-L382apiDocs映射加入文档地址L502light-leaks: https://www.remotion.dev/docs/light-leaks。从源码结构看package-info.ts是 Studio 侧唯一的包元信息聚合点四个映射分别对应“包是否存在、如何描述、能否安装、文档在哪”新包必须四者齐备。步骤三文档接入 packages/docs/docs/name/SKILL 把文档列为独立大步骤并指向writing-docs技能.agents/skills/writing-docs/SKILL.md获取写作细节。以 packages/docs/docs/light-leaks/ 为范本包含四类文件1. docs 包依赖在 packages/docs/package.json 的 dependencies 中加remotion/name: workspace:*light-leaks 位于 L71。SKILL 特别注明这是 twoslash 代码片段的硬前提——文档里的可运行示例需要能真实解析目标包。2.index.mdx包首页参考 packages/docs/docs/light-leaks/index.mdx结构为 frontmatterimage、id、slug、title→ 标题与AvailableFrom v... /→Installation pkgremotion/name /安装 tabs →TableOfContents /网格 → License 区块链接/docs/license。3.table-of-contents.tsx用Grid/TOCItem组件列出全部 API 入口参考 packages/docs/docs/light-leaks/table-of-contents.tsximport React from react; import {Grid} from ../../components/TableOfContents/Grid; import {TOCItem} from ../../components/TableOfContents/TOCItem; export const TableOfContents: React.FC () { return ( div Grid TOCItem link/docs/light-leaks/light-leak-effect strongcodelightLeak()/code/strong divApply a light leak as a canvas effect/div /TOCItem /Grid /div ); };4. 各 API 的独立.mdx页面light-leaks 下有 light-leak.mdx 与 light-leak-effect.mdx每个组件/函数一页。最后做两处全局编辑在 packages/docs/sidebars.ts 中为remotion/name新增一个 categorylight-leaks 位于 L1025-L1030items列出各 API 页 id并在 L1141 的总目录中挂接在 packages/docs/components/TableOfContents/api.tsx 中 import 本包的 TOC 组件并添加对应 sectionlight-leaks 为 L17 的import {TableOfContents as LightLeaksTableOfContents} from ../../docs/light-leaks/table-of-contents与 L120 的LightLeaksTableOfContents /使其出现在全站 API 总目录中。步骤四在示例工程中落地一个用法新包要在 packages/example 中有可运行的 CompositionSKILL 列出四件事以 light-leaks 的实际接入为证packages/example/package.json 中加remotion/light-leaks: workspace:*L59创建packages/example/src/Name/index.tsx示例组件light-leaks 对应 packages/example/src/LightLeak 目录在 packages/example/src/Root.tsx 注册Composition。light-leaks 的注册L2794 起展示了惯例——用Folder namelight-leaks归类声明id、component、width/height/fps/durationInFramesFolder namelight-leaks Composition idlight-leak component{LightLeakExample} width{1080} height{1080} fps{30} durationInFrames{90} / /Folder在 packages/example/tsconfig.json 的references中加{path: ../name}light-leaks 位于 L47保证示例工程的类型引用链闭合。步骤五、六安装与构建接线完成后执行# 1. 安装 workspace 依赖SKILL 步骤 5 bun i # 2. 构建新包SKILL 步骤 6 cd packages/name bun run makemake展开即tsgo bun --env-file../.env.bundle bundle.tstsgo 产出dist/index.d.tsBun 按bundle.ts的配置产出dist/esm/*.mjs。构建前注意bundle.ts的NODE_ENVproduction守卫且需按package.json的exports校验产物路径dist/index.d.ts/dist/esm/index.mjs确实生成。版本约定SKILL 的 Version 一节给出两条规则包版本取当前版本来源是 packages/core/src/version.ts该文件头部注明“Automatically generated on publish”即发布时统一生成文档版本文档中的AvailableFrom v...等版本标记要在此基础上patch 1因为新包只会随下一个 Remotion 版本一起发布。light-leaks 首页的AvailableFrom v4.0.415 /就是这一规则的实例。约定模式速查PatternsSKILL 末尾的 Patterns 一节浓缩了新包的硬性约定逐条对照模板包即可验证约定依据内部依赖一律workspace:*packages/light-leaks/package.json 的dependencies共享外部依赖版本一律catalog:同上zod/react/eslint/typescript/native-previewmake脚本为tsgo bun --env-file../.env.bundle bundle.ts同上scripts.makepackage.json加type: module同上devDependencies 加typescript/native-preview: catalog:tsgo 来自该包同上types/main指向dist/index.d.ts与dist/index.js而非dist/cjs/同上main/types/exports字段含 React 组件的包需react/react-dom的peerDependencies同上16.8.0完成清单按 SKILL 全量核对一遍新包即视为接线完成packages/name/下package.json、tsconfig.json、src/index.ts、bundle.ts、eslint.config.mjs、.npmignore、README.md齐备external 清单覆盖react/react-dom/react/jsx-runtime/react/jsx-dev-runtime/remotion/remotion/no-react及本包依赖的兄弟包子路径根 tsconfig.json、packages/cli/src/list-of-remotion-packages.ts、packages/create-video/src/list-of-remotion-packages.ts、packages/studio-shared/src/package-info.ts四处映射均已登记packages/docs/docs/name/文档目录 packages/docs/package.json workspace 依赖 packages/docs/sidebars.ts 分类 packages/docs/components/TableOfContents/api.tsx section 全部接入示例工程的依赖、组件目录、Root.tsx Composition 与 tsconfig 引用四件套就位bun i与bun run make通过版本号取自 packages/core/src/version.ts文档版本 patch 1。需要说明的是remotion/light-leaks本身已在文档中标记为 deprecated见 packages/docs/docs/light-leaks/index.mdx自 Remotion 5.0 起停止发布能力迁移至remotion/effects/light-leak但截至当前仓库快照SKILL 文档仍指定它作为新包的骨架模板——其工程化文件package.json、bundle.ts、tsconfig、eslint 配置、.npmignore、文档目录依然是最贴近现行流程的参照实现。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Remotion 单仓工程实战指南：从零创建一个全新的 @remotion 包
Remotion 单仓工程实战指南从零创建一个全新的 remotion 包【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本篇指南基于 Remotion 仓库内置的 Agent 技能文档 .agents/skills/add-new-package/SKILL.md完整还原在 Remotion monorepo 中新增一个remotion/*包的全流程从以remotion/light-leaks为模板搭建包骨架到根 tsconfig 注册、CLI 包清单登记、Studio 元信息登记、文档站接入、示例工程集成再到安装与构建。读完后你可以独立完成一个新包从脚手架到可发布状态的全部接线工作。背景为什么要按固定流程加包Remotion 仓库是一个基于 Bun workspace 的 monorepo根package.jsonbun.lock每个功能包独立发布到 npm。新增一个包并非只写代码它同时牵涉TypeScript 项目引用根 tsconfig.json 通过references聚合了上百个子包如 L280 处的{path: ./packages/light-leaks}共享 packages/tsconfig.settings.json 中定义的composite、strict等编译基线发布与版本对齐packages/cli与packages/create-video各自维护一份 Remotion 包清单用于版本管理与脚手架Studio 元信息packages/studio-shared/src/package-info.ts 是 Studio 识别“哪些包可安装、如何描述、文档在哪”的唯一数据源文档站Docusaurus 文档站packages/docs通过sidebars.ts与TableOfContents组件体系组织 API 页面且 twoslash 代码示例依赖 docs 包对目标包的 workspace 依赖。因此 SKILL 文档把流程固化为 6 个步骤加一组约定模式下文逐步骤结合模板包remotion/light-leaks的源码逐项展开。步骤一创建包骨架 packages/name/SKILL 指定以 packages/light-leaks 作为模板包新包目录下需要准备以下 7 个文件package.json、tsconfig.json、src/index.ts、bundle.ts、eslint.config.mjs、.npmignore、README.md。package.json拷贝模板并替换元信息模板 packages/light-leaks/package.json 的关键字段如下以 light-leaks 为例新包需更新name、description、homepage、dependencies{ name: remotion/light-leaks, version: 4.0.520, description: Light leak effects for Remotion, main: dist/index.js, types: dist/index.d.ts, module: dist/esm/index.mjs, repository: { url: https://github.com/remotion-dev/remotion/tree/main/packages/light-leaks }, type: module, scripts: { test: bun test src/test, formatting: oxfmt src --check, format: oxfmt src, lint: eslint src, watch: tsgo -w, make: tsgo bun --env-file../.env.bundle bundle.ts }, license: Remotion License, dependencies: { remotion/effects: workspace:*, remotion: workspace:*, zod: catalog: }, peerDependencies: { react: 16.8.0, react-dom: 16.8.0 }, exports: { .: { types: ./dist/index.d.ts, module: ./dist/esm/index.mjs, import: ./dist/esm/index.mjs }, ./package.json: ./package.json }, devDependencies: { react: catalog:, react-dom: catalog:, remotion/eslint-config-internal: workspace:*, eslint: catalog:, typescript/native-preview: catalog: }, publishConfig: { access: public }, homepage: https://www.remotion.dev/docs/light-leaks }可以从中读出 SKILL “Patterns”一节的真实落点type: module新包统一使用 ESM内部依赖写workspace:*如remotion/effects、remotion共享外部依赖版本写catalog:如zod、react、eslint、typescript/native-preview版本统一由根 workspace catalog 管理main/types指向dist/index.js、dist/index.d.ts不是dist/cjs/类型与入口产物布局固定含 React 组件的包需要peerDependencies声明react与react-domlight-leaks 声明为16.8.0make脚本是tsgo bun --env-file../.env.bundle bundle.ts先用 tsgoTypeScript 原生编译器预览版产出声明文件再用 Bun 打包运行时代码--env-file指向packages/目录下的构建环境变量文件。tsconfig.json只发声明文件运行时代码交给打包器packages/light-leaks/tsconfig.json 全文{ extends: ../tsconfig.settings.json, compilerOptions: { rootDir: src, outDir: dist, jsx: react-jsx, skipLibCheck: true, target: ES2022, module: es2020, moduleResolution: bundler, declaration: true, emitDeclarationOnly: true }, include: [src], references: [{path: ../core}] }SKILL 中列出的每个参数都在这里得到印证extends ../tsconfig.settings.json继承composite/strict/isolatedModules等基线packages/tsconfig.settings.json、emitDeclarationOnly: truetsgo 只生成.d.tsJS 产物全部由bundle.ts负责、outDir: dist、module: es2020、moduleResolution: bundler、target: ES2022。references指向本包依赖的兄弟包light-leaks 依赖core这也是根 tsconfig 项目引用链的一部分。bundle.tsBun 构建脚本与 external 清单packages/light-leaks/bundle.ts 展示了标准打包逻辑核心是对build()的配置import path from path; import {build} from bun; if (process.env.NODE_ENV ! production) { throw new Error(This script must be run using NODE_ENVproduction); } const output await build({ entrypoints: [src/index.ts], naming: [name].mjs, external: [ remotion/effects/light-leak, // 包特有的子路径依赖示例 remotion, remotion/no-react, react, react/jsx-runtime, react/jsx-dev-runtime, react-dom, ], });SKILL 要求的标准 external 清单是react、remotion、remotion/no-react、react/jsx-runtime、react/jsx-dev-runtime、react-dom——框架与 Remotion 核心必须保持外部模块交由消费者项目的打包器解析避免重复打包和版本冲突light-leaks 额外 external 了它依赖的remotion/effects/light-leak子路径说明凡是来自其他 workspace 包的子路径导入也应一并 external。脚本还要求NODE_ENVproduction才允许运行并把产物按[name].mjs命名写入dist/esm/与package.json中exports的import/module条件对齐。其余四个文件src/index.ts包的唯一导出入口。参考 packages/light-leaks/src/index.ts它集中 re-export 组件、effect 函数、schema 与类型如LightLeak、lightLeak、lightLeakEffectSchema是 twoslash 文档示例和bundle.tsentrypoint 的共同入口。eslint.config.mjs复用仓库内部配置。模板 packages/light-leaks/eslint.config.mjs 仅两行有效逻辑import {remotionFlatConfig} from remotion/eslint-config-internal; const config remotionFlatConfig({react: true}); export default {...config};按 SKILL 要求包含 React 组件的包传remotionFlatConfig({react: true})纯逻辑包传{react: false}。.npmignore从 light-leaks 拷贝。packages/light-leaks/.npmignore 排除了src、bundle.ts、tsconfig.json、eslint.config.mjs、*.tgz、.turbo、tsconfig.tsbuildinfo及dist/test/**等——发布物只保留dist产物与元文件。README.md包含包名、描述、安装命令与文档链接参考 packages/light-leaks/README.md。其中安装命令固定为npm install remotion/light-leaks --save-exact精确版本不带^并附一句“所有remotion与remotion/*包需对齐同一版本”——这是 Remotion 生态的强约定新包 README 应原样保留。如果新包带参数组件SKILL 配套的测试习惯可参考packages/light-leaks/src/test/light-leak-component-params.test.ts测试放在src/test/下通过bun test src/test即test脚本运行。步骤二在 monorepo 中登记新包包代码写完后需要在四处登记缺任何一处都会导致工具链不识别该包。1. 根 tsconfig.json在references数组中追加{path: ./packages/name}。当前该数组已列出 100 个包light-leaks位于 L279-L281加入后才能被项目引用构建覆盖。2. packages/cli/src/list-of-remotion-packages.ts追加字符串remotion/namelight-leaks位于该文件 L101。这份清单服务于 CLI 侧的版本/包管理逻辑。3. packages/create-video/src/list-of-remotion-packages.ts同样追加remotion/namecreate-video脚手架在安装依赖时依赖此清单。4. packages/studio-shared/src/package-info.ts需要修改四处以 light-leaks 为参照packages数组中加入light-leaksL103descriptions映射加入短描述L266light-leaks: Light leak effects for RemotioninstallableMap中用shouldReleasePackage({packageName: remotion/light-leaks, ...})登记可安装性L381-L382apiDocs映射加入文档地址L502light-leaks: https://www.remotion.dev/docs/light-leaks。从源码结构看package-info.ts是 Studio 侧唯一的包元信息聚合点四个映射分别对应“包是否存在、如何描述、能否安装、文档在哪”新包必须四者齐备。步骤三文档接入 packages/docs/docs/name/SKILL 把文档列为独立大步骤并指向writing-docs技能.agents/skills/writing-docs/SKILL.md获取写作细节。以 packages/docs/docs/light-leaks/ 为范本包含四类文件1. docs 包依赖在 packages/docs/package.json 的 dependencies 中加remotion/name: workspace:*light-leaks 位于 L71。SKILL 特别注明这是 twoslash 代码片段的硬前提——文档里的可运行示例需要能真实解析目标包。2.index.mdx包首页参考 packages/docs/docs/light-leaks/index.mdx结构为 frontmatterimage、id、slug、title→ 标题与AvailableFrom v... /→Installation pkgremotion/name /安装 tabs →TableOfContents /网格 → License 区块链接/docs/license。3.table-of-contents.tsx用Grid/TOCItem组件列出全部 API 入口参考 packages/docs/docs/light-leaks/table-of-contents.tsximport React from react; import {Grid} from ../../components/TableOfContents/Grid; import {TOCItem} from ../../components/TableOfContents/TOCItem; export const TableOfContents: React.FC () { return ( div Grid TOCItem link/docs/light-leaks/light-leak-effect strongcodelightLeak()/code/strong divApply a light leak as a canvas effect/div /TOCItem /Grid /div ); };4. 各 API 的独立.mdx页面light-leaks 下有 light-leak.mdx 与 light-leak-effect.mdx每个组件/函数一页。最后做两处全局编辑在 packages/docs/sidebars.ts 中为remotion/name新增一个 categorylight-leaks 位于 L1025-L1030items列出各 API 页 id并在 L1141 的总目录中挂接在 packages/docs/components/TableOfContents/api.tsx 中 import 本包的 TOC 组件并添加对应 sectionlight-leaks 为 L17 的import {TableOfContents as LightLeaksTableOfContents} from ../../docs/light-leaks/table-of-contents与 L120 的LightLeaksTableOfContents /使其出现在全站 API 总目录中。步骤四在示例工程中落地一个用法新包要在 packages/example 中有可运行的 CompositionSKILL 列出四件事以 light-leaks 的实际接入为证packages/example/package.json 中加remotion/light-leaks: workspace:*L59创建packages/example/src/Name/index.tsx示例组件light-leaks 对应 packages/example/src/LightLeak 目录在 packages/example/src/Root.tsx 注册Composition。light-leaks 的注册L2794 起展示了惯例——用Folder namelight-leaks归类声明id、component、width/height/fps/durationInFramesFolder namelight-leaks Composition idlight-leak component{LightLeakExample} width{1080} height{1080} fps{30} durationInFrames{90} / /Folder在 packages/example/tsconfig.json 的references中加{path: ../name}light-leaks 位于 L47保证示例工程的类型引用链闭合。步骤五、六安装与构建接线完成后执行# 1. 安装 workspace 依赖SKILL 步骤 5 bun i # 2. 构建新包SKILL 步骤 6 cd packages/name bun run makemake展开即tsgo bun --env-file../.env.bundle bundle.tstsgo 产出dist/index.d.tsBun 按bundle.ts的配置产出dist/esm/*.mjs。构建前注意bundle.ts的NODE_ENVproduction守卫且需按package.json的exports校验产物路径dist/index.d.ts/dist/esm/index.mjs确实生成。版本约定SKILL 的 Version 一节给出两条规则包版本取当前版本来源是 packages/core/src/version.ts该文件头部注明“Automatically generated on publish”即发布时统一生成文档版本文档中的AvailableFrom v...等版本标记要在此基础上patch 1因为新包只会随下一个 Remotion 版本一起发布。light-leaks 首页的AvailableFrom v4.0.415 /就是这一规则的实例。约定模式速查PatternsSKILL 末尾的 Patterns 一节浓缩了新包的硬性约定逐条对照模板包即可验证约定依据内部依赖一律workspace:*packages/light-leaks/package.json 的dependencies共享外部依赖版本一律catalog:同上zod/react/eslint/typescript/native-previewmake脚本为tsgo bun --env-file../.env.bundle bundle.ts同上scripts.makepackage.json加type: module同上devDependencies 加typescript/native-preview: catalog:tsgo 来自该包同上types/main指向dist/index.d.ts与dist/index.js而非dist/cjs/同上main/types/exports字段含 React 组件的包需react/react-dom的peerDependencies同上16.8.0完成清单按 SKILL 全量核对一遍新包即视为接线完成packages/name/下package.json、tsconfig.json、src/index.ts、bundle.ts、eslint.config.mjs、.npmignore、README.md齐备external 清单覆盖react/react-dom/react/jsx-runtime/react/jsx-dev-runtime/remotion/remotion/no-react及本包依赖的兄弟包子路径根 tsconfig.json、packages/cli/src/list-of-remotion-packages.ts、packages/create-video/src/list-of-remotion-packages.ts、packages/studio-shared/src/package-info.ts四处映射均已登记packages/docs/docs/name/文档目录 packages/docs/package.json workspace 依赖 packages/docs/sidebars.ts 分类 packages/docs/components/TableOfContents/api.tsx section 全部接入示例工程的依赖、组件目录、Root.tsx Composition 与 tsconfig 引用四件套就位bun i与bun run make通过版本号取自 packages/core/src/version.ts文档版本 patch 1。需要说明的是remotion/light-leaks本身已在文档中标记为 deprecated见 packages/docs/docs/light-leaks/index.mdx自 Remotion 5.0 起停止发布能力迁移至remotion/effects/light-leak但截至当前仓库快照SKILL 文档仍指定它作为新包的骨架模板——其工程化文件package.json、bundle.ts、tsconfig、eslint 配置、.npmignore、文档目录依然是最贴近现行流程的参照实现。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
