Skip to main content

使用传统的 Babel 转译

在 Remotion 2.0 中，传统使用 babel-loader 对 Javascript 和 Typescript 的转译默认已被更快速的 esbuild-loader 所取代。

🌐 In Remotion 2.0, the traditional transpilation of Javascript and Typescript using the babel-loader has been replaced by the faster esbuild-loader by default.

如果因某种原因你需要回到之前的行为，你可以覆盖 Webpack 配置。请记住，覆盖 Webpack 配置是 reducer 风格的，你会在函数参数中得到默认配置，然后返回修改后的配置版本。

🌐 If you for some reason need to go back to the previous behavior, you may override the Webpack configuration. Remember that overriding the Webpack configuration works reducer-style, where you get the default configuration in a function argument and you return the modified version of your config.

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

🌐 We provide a compatibility package @remotion/babel-loader that you can install into your Remotion project and use the function replaceLoadersWithBabel() to swap out the ESBuild loader with the old Babel one that was in Remotion 1.0

通常情况下，这不是必要的，建议报告有关新 ESBuild 加载器的问题。

🌐 This should not be necessary in general, it is encouraged to report issues regarding the new ESBuild loader.

示例​

🌐 Example

npm i babel-loader @babel/preset-env @babel/preset-react
remotion.config.ts
import { replaceLoadersWithBabel } from "@remotion/babel-loader";

Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});

使用 bundle 或 deploySite 时​

🌐 When using bundle or deploySite

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

🌐 When using the Node.JS APIs - bundle() for SSR or deploySite() for Lambda, you also need to provide the Webpack override, since the Node.JS APIs do not read from the config file.

my-script.js
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";

await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});

另请参阅​

🌐 See also

Last updated on