Skip to main content

v3.0 迁移

在从 Remotion 2 升级到 Remotion 3 时，请注意以下更改并将其应用到您的项目中。

如何升级​

将 remotion 和所有以 @remotion 开头的包升级到 ^3.0.0：

diff
- "remotion": "^2.6.15"
- "@remotion/bundler": "^2.6.15"
- "@remotion/eslint-config": "^2.6.15"
- "@remotion/eslint-plugin": "^2.6.15"
- "@remotion/cli": "^2.6.15"
- "@remotion/renderer": "^2.6.15"
+ "remotion": "^3.0.0"
+ "@remotion/bundler": "^3.0.0"
+ "@remotion/eslint-config": "^3.0.0"
+ "@remotion/eslint-plugin": "^3.0.0"
+ "@remotion/cli": "^3.0.0"
+ "@remotion/renderer": "^3.0.0"
diff
- "remotion": "^2.6.15"
- "@remotion/bundler": "^2.6.15"
- "@remotion/eslint-config": "^2.6.15"
- "@remotion/eslint-plugin": "^2.6.15"
- "@remotion/cli": "^2.6.15"
- "@remotion/renderer": "^2.6.15"
+ "remotion": "^3.0.0"
+ "@remotion/bundler": "^3.0.0"
+ "@remotion/eslint-config": "^3.0.0"
+ "@remotion/eslint-plugin": "^3.0.0"
+ "@remotion/cli": "^3.0.0"
+ "@remotion/renderer": "^3.0.0"

然后分别运行 npm i、yarn 或 pnpm i。

可选：升级到 React 18

您需要同时升级 react 和 react-dom：

diff
- "react": "17.0.1"
- "react-dom": "17.0.1"
+ "react": "18.2.0"
+ "react-dom": "18.2.0"
diff
- "react": "17.0.1"
- "react-dom": "17.0.1"
+ "react": "18.2.0"
+ "react-dom": "18.2.0"

如果您使用 TypeScript，请同时更新到最新的类型：

diff
- "@types/react": "17.0.3"
+ "@types/react": "18.0.0"
diff
- "@types/react": "17.0.3"
+ "@types/react": "18.0.0"

可选：升级到 ESLint 8

diff
- "eslint": "^7.15.0"
+ "eslint": "^8.13.0"
diff
- "eslint": "^7.15.0"
+ "eslint": "^8.13.0"

重大更改​

需要 Node 14​

以前，我们支持 Node 12 和 13，但现在不再支持。

升级路径： 至少升级到 Node 14。

Remotion 使用 React 18 类型构建​

Remotion 组件遵循 version 18 of @types/react and @types/react-dom。可能会出现轻微的类型错误，可以通过调整您的组件来解决。我们建议您自行升级 @types/react 包。

升级路径： 更新到 React 18 - 可选但建议。

renderFrames()/renderStill(): 移除 compositionId 参数​

相反，现在将组合 ID 嵌入到 composition 对象中（以前是 config）。

升级路径： 从 renderFrames() 中删除 compositionId 属性。将 composition.id 属性添加到 renderFrames() 中或从 getCompositions() 中提取对象。

以前
tsx
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
以前
tsx
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
现在
tsx
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
现在
tsx
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});

renderFrames()/renderStill(): 将 config 重命名为 composition​

renderFrames() 和 renderStill() 中的 config 参数已重命名为 composition，现在需要额外的 id 属性。

以前
tsx
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
以前
tsx
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
现在
tsx
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
现在
tsx
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});

升级路径： 重命名 renderFrames() 和 renderStill() 的 config 属性。将 composition.id 属性添加到 getCompositions() 中或从中获取对象。

renderFrames()/renderStill()/getCompositions(): 应用中抛出的错误导致渲染失败​

以前，您可以使用 getCompositions()、renderFrames() 和 renderStill() 的 onError 属性捕获在 Remotion 代码中抛出的错误。

Remotion 3.0 的新行为是，如果发生错误，这些函数将拒绝。

升级路径： 从 getCompositions()、renderFrames() 和 renderStill() 调用中移除 onError 属性，并在 try / catch 中捕获错误。消除应用程序中抛出的任何错误。

以前
tsx
await renderStill({
  // ...
  output: "/tmp/still.png",
  onError: (err) => {
    console.log("Error occured in browser", err);
  },
});
以前
tsx
await renderStill({
  // ...
  output: "/tmp/still.png",
  onError: (err) => {
    console.log("Error occured in browser", err);
  },
});
现在
tsx
try {
  await renderStill({
    // ...
    output: "/tmp/still.png",
  });
} catch (err) {
  console.log("Error occured in browser", err);
}
现在
tsx
try {
  await renderStill({
    // ...
    output: "/tmp/still.png",
  });
} catch (err) {
  console.log("Error occured in browser", err);
}

renderFrames()/renderStill()/getCompositions(): 将 webpackBundle 重命名为 serveUrl​

webpackBundle 属性已重命名为 serveUrl，以反映现在还支持 URL。在功能上，支持与以前相同的行为。

升级路径： 将 webpackBundle 重命名为 serveUrl。

以前
tsx
await renderStill({
  output: "/tmp/still.png",
  webpackBundle: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});
以前
tsx
await renderStill({
  output: "/tmp/still.png",
  webpackBundle: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});
现在
tsx
await renderStill({
  output: "/tmp/still.png",
  serveUrl: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});
现在
tsx
await renderStill({
  output: "/tmp/still.png",
  serveUrl: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});

stitchFramesToVideo(): 从 API 中移除 imageFormat、parallelism 和 webpackBundle​

  • 不再需要将 imageFormat 和 webpackBundle 参数传递给 stitchFramesToVideo()，因为现在通过调用 renderFrames() 检索到的 assetsInfo 中已嵌入了必要的信息。
  • parallelism 参数可能不是您认为的那样。为避免任何混淆，我们将其移除而没有任何替代。

升级路径： 从 stitchFramesToVideo() 中移除 imageFormat、parallelism 和 webpackBundle 参数。

useVideoConfig(): 返回额外的 id 和 defaultProps 属性​

useVideoConfig() 钩子现在返回两个额外的属性：```

diff
{
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "durationInFrames": 30
+ "id": "my-comp",
+ "defaultProps": {}
}
diff
{
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "durationInFrames": 30
+ "id": "my-comp",
+ "defaultProps": {}
}

升级路径：确保您不依赖于新属性不存在的情况。

getCompositions(): 将 browserInstance 重命名为 puppeteerInstance​

为了与 renderStill()、renderFrames() 和 renderMedia() 的命名保持一致，browserInstance 被重命名为 puppeteerInstance。

overrideWebpackConfig(): 配置文件选项已移除​

overrideWebpackConfig 的导入已被弃用并移除。现在请使用 Config.overrideWebpackConfig()。

升级路径：在 remotion.config.ts 中更改导入并使用 overrideWebpackConfig()。

```tsx title="现在"
import { Config } from "remotion";
Config.overrideWebpackConfig();
```tsx title="现在"
import { Config } from "remotion";
Config.overrideWebpackConfig();