Skip to main content

使用传统的 Babel 转译

在 Remotion 2.0 中，默认情况下，使用 babel-loader 进行 Javascript 和 Typescript 的传统转译已被更快的 esbuild-loader 替代。

如果出于某种原因需要返回到以前的行为，您可以覆盖 Webpack 配置。请记住，覆盖 Webpack 配置的工作方式类似于 reducer 风格，您会在函数参数中获得默认配置，并返回您配置的修改版本。

我们提供了一个兼容包 @remotion/babel-loader，您可以将其安装到您的 Remotion 项目中，并使用函数 replaceLoadersWithBabel() 将 ESBuild loader 替换为 Remotion 1.0 中的旧 Babel loader。

一般情况下不应该需要这样做，鼓励您报告问题 关于新的 ESBuild loader。

示例​

bash
npm i babel-loader @babel/preset-env @babel/preset-react
bash
npm i babel-loader @babel/preset-env @babel/preset-react
remotion.config.ts
ts
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});
remotion.config.ts
ts
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});

当使用 bundle 或 deploySite 时​

当使用 Node.JS API - bundle() 用于 SSR 或 deploySite() 用于 Lambda 时，您还需要提供 Webpack 覆盖，因为 Node.JS API 不会从配置文件中读取。

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});
my-script.js
ts
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});

参见​