多么非凡的发布！在不到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 规则​

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

升级很容易​

只需在您的项目中键入

npm run upgrade

npm run upgrade

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

我已经使用 After Effects 多年了，但一直以来，我的梦想是用代码制作视频。在 React 生态系统中，我习惯于利用强大的组合性、可重用性，为每个用户定制体验。使用脚本、代码检查工具和外部依赖项让我的编码生活更轻松。

因此，作为一个概念验证，我尝试用 React 为我的 AnySticker 应用¹ 制作预告片，并使用 Puppeteer 渲染每一帧，再使用 FFMPEG 拼接它们。

最终的结果是我认为是我迄今为止制作的最好的视频。我意识到这个想法是有潜力的。

这是我尝试为社区创建一个工具，允许您在 React 中编写视频。显然，这是一项艰巨的任务，因此这不是一个内置了数百种不同功能的产品。相反，遵循 React 的理念，这是一个尝试创建一个在 React 中渲染视频的最小基础。基本上，您会得到一个空白画布，您可以使用内置在浏览器中的现有 Web 技术和您喜爱的外部库创建您的动态图形。实际上，Remotion 是如此简洁，它仅由您需要学习的 5-6 个 API 组成，就可以开始使用。

开始非常容易。假设您已经安装了 Yarn，运行：

bash
yarn create video

bash
yarn create video

然后阅读 文档。在 Twitter 上告诉我 您的想法！