Skip to main content

Remotion 1.1

· 3 min read
Jonny Burger
Jonny Burger
独立开发者

多么非凡的发布！在不到24小时内，Remotion的宣传视频在Twitter上获得了超过100,000次的观看。反馈绝对是压倒性的！

现在是时候迭代并使Remotion变得更好了。此版本包含两个新功能：自定义Webpack配置和新的<Img>和</IFrame>组件！

自定义Webpack配置​

查看文档

人们对如何使用Remotion有着疯狂的想法，比如导入MDX文件或使用React Native组件。现在这是可能的！

在提供如何配置Remotion的可能性时，提供高度的灵活性和良好的开发者体验非常重要。以下是如何更新webpack配置：

remotion.config.ts

ts
import {overrideWebpackConfig} from '@remotion/bundler';
overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...currentConfiguration.module.rules,
        // Add more loaders here
      ],
    },
  };
});
ts
import {overrideWebpackConfig} from '@remotion/bundler';
overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...currentConfiguration.module.rules,
        // Add more loaders here
      ],
    },
  };
});

有一个新的Remotion配置文件，您可以用Typescript编写。更新Webpack配置使用reducer模式：您获得默认配置，您有责任返回更新后的Webpack配置。您将获得类型检查、自动完成以及灵活性，可以仅更新单个属性或传入全新的配置。这里没有黑魔法 - 因为这只是一个纯函数，结果将是非常可预测的。

新的<Img />和<IFrame />组件​

查看文档

这些新组件的目的是帮助解决Remotion中容易忽视的问题：图像或iframe正在被渲染，但Remotion不会等到这些网络资源加载完成。结果是：最终结果中会出现闪烁！正确的做法是使用delayRender API等待，但这并不是很明显。现在Remotion带有内置组件，将等待资源加载完成。

奖励：ESLint 规则​

ESLint 规则 'warn-native-media-tag'

为了避免自己踩到坑，Remotion 现在配备了一个 ESLint 规则，如果您使用原生的 <img>、<iframe>、<video> 或 <audio> 标签，它会发出警告。当您使用 Remotion 封装版本时，这些标签的效果更好。

升级很容易​

只需在您的项目中键入

npm run upgrade
npm run upgrade

您将获得所有最新的 Remotion 包！也许您还注意到编辑器中有一个横幅，通知您何时有可用的升级。