Skip to main content

Remotion 1.1

· 3 min read
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 包!也许您还注意到编辑器中有一个横幅,通知您何时有可用的升级。