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);
});

当使用 bundledeploySite

当使用 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),
});

参见