Skip to main content

v3.0 迁移

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

🌐 When upgrading from Remotion 2 to Remotion 3, note the following changes and apply them to your project.

如何升级​

🌐 How to upgrade

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

🌐 Upgrade remotion and all packages starting with @remotion to ^3.0.0:

- "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。

🌐 Run npm i , yarn or pnpm i respectively afterwards.

可选：升级到 React 18

你需要升级 react 和 react-dom：

🌐 You need to upgrade both react and react-dom:

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

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

🌐 If you use TypeScript, update to the newest types as well:

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

可选：升级到 ESLint 8

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

重大变更​

🌐 Breaking changes

需要 Node 14​

🌐 Node 14 is required

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

🌐 Previously, we supported Node 12 and 13, but we no longer do.

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

Remotion 是使用 React 18 类型构建的​

🌐 Remotion is built with React 18 types

Remotion 组件遵循 版本 18 的 @types/react 和 @types/react-dom。可能会出现一些小的类型错误，可以通过调整你的组件来解决。我们建议你自行升级 @types/react 包。

🌐 The Remotion components adhere to version 18 of @types/react and @types/react-dom. Minor type errors may occur that can be resolved by adjusting your components. We recommend that you upgrade the @types/react package yourself.

升级路径： 更新到 React 18 - 可选但推荐。

renderFrames()/renderStill()：已移除 compositionId 参数​

🌐 renderFrames()/renderStill(): compositionId parameter removed

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

🌐 Instead, the composition ID is now embedded in the composition object (previously config).

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

Previously
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
Now
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});

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

🌐 renderFrames()/renderStill(): renamed config in to composition

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

🌐 The config parameter in renderFrames() and renderStill() was renamed to composition and now requires an additional id property.

Previously
renderFrames({
  compositionId: "my-com",
  config: {
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});
Now
renderFrames({
  composition: {
    id: "my-com",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 300,
  },
});

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

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

🌐 renderFrames()/renderStill()/getCompositions(): Errors thrown in your app make the render fail

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

🌐 Previously, you could catch errors being thrown in your Remotion code using the onError property of getCompositions(), renderFrames() and renderStill().

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

🌐 The new behavior of Remotion 3.0 is that if an error occurs, these functions reject instead.

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

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

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

🌐 renderFrames()/renderStill()/getCompositions(): Renamed webpackBundle to serveUrl

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

🌐 The webpackBundle property was renamed to serveUrl to reflect the fact that now a URL is also supported. Functionally, the same behavior is supported as before.

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

Previously
await renderStill({
  output: "/tmp/still.png",
  webpackBundle: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});
Now
await renderStill({
  output: "/tmp/still.png",
  serveUrl: "/tmp/react-motion-graphics8zfs9d/index.html",
  // ...
});

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

🌐 stitchFramesToVideo(): removed imageFormat, parallelism and webpackBundle from API

  • 参数 imageFormat 和 webpackBundle 不再需要传入 stitchFramesToVideo()，因为所需的信息现在已经嵌入到 assetsInfo 中，通过调用 renderFrames() 获取。
  • parallelism 参数可能没有达到你预期的效果。为了避免任何混淆，我们将其移除了，没有进行任何替代。

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

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

🌐 useVideoConfig(): returns additional id and defaultProps properties

useVideoConfig() 钩子现在返回两个附加属性：

🌐 The useVideoConfig() hook now returns two additional properties:

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

升级路径：确保你不要依赖新属性不存在。

getCompositions()：已将 browserInstance 重命名为 puppeteerInstance​

🌐 getCompositions(): renamed browserInstance to puppeteerInstance

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

🌐 To align the name with renderStill(), renderFrames() and renderMedia(), browserInstance was renamed to puppeteerInstance.

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

🌐 overrideWebpackConfig(): Config file option is removed

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

🌐 The import overrideWebpackConfig was deprecated and now removed. Use Config.overrideWebpackConfig() instead.

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

Previously
Now
import { Config } from "remotion";

Config.overrideWebpackConfig();
Last updated on