使用舊版 Babel 轉譯

背景

在 Remotion 2.0 中，傳統的使用 babel-loader 進行 JavaScript 和 TypeScript 轉譯的方式，已被更快速的 esbuild-loader 取代。

如果您基於某些原因需要回退到舊版行為，可以覆蓋 Webpack 配置。

請注意，覆蓋 Webpack 配置會帶來一定風險，官方建議如遇到 esbuild-loader 的問題，應回報 issue 而非直接回退。

安裝相容套件

Remotion 提供了相容性套件 @remotion/babel-loader，以及函數 replaceLoadersWithBabel，您可以安裝到專案中使用。

此套件通常不是必要的，官方鼓勵大家回報問題，而非直接回退到舊版轉譯方式。

首先，安裝必要的套件：

使用 npm：

npm i babel-loader @babel/preset-env @babel/preset-react

使用 pnpm：

pnpm i babel-loader @babel/preset-env @babel/preset-react

使用 yarn：

yarn add babel-loader @babel/preset-env @babel/preset-react

接著安裝 Remotion 的 Babel 載入器套件：

npm i @remotion/babel-loader

在 remotion.config.ts 中設定

在您的 Remotion 設定文件中覆蓋 Webpack 設定：

// remotion.config.ts
import { Config } from '@remotion/cli/config';
import { replaceLoadersWithBabel } from '@remotion/babel-loader';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});

在 bundle() 或 deploySite() 中使用

當使用 Node.js API（bundle() 用於 SSR，或 deploySite() 用於 Lambda）時，您也需要提供 Webpack 覆蓋函數。

建議的做法是將覆蓋函數放在獨立文件中：

// @filename: ./src/webpack-override.ts
import { WebpackOverrideFn } from '@remotion/bundler';
import { replaceLoadersWithBabel } from '@remotion/babel-loader';
 
export const webpackOverride: WebpackOverrideFn = (currentConfig) => {
  return replaceLoadersWithBabel(currentConfig);
};

然後在 remotion.config.ts 中引用：

// @filename: remotion.config.ts
import { Config } from '@remotion/cli/config';
import { webpackOverride } from './src/webpack-override';
 
Config.overrideWebpackConfig(webpackOverride);

以及在渲染腳本中引用：

import { bundle } from '@remotion/bundler';
import { webpackOverride } from './src/webpack-override';
 
const bundleLocation = await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});

何時需要舊版 Babel？

以下情況可能需要使用舊版 Babel：

特定的 Babel 插件：您使用了 esbuild 不支援的 Babel 轉換插件
裝飾器語法：使用了需要 Babel 的實驗性裝飾器語法
特殊的 JSX 轉換：自訂的 JSX pragma 或轉換邏輯
與舊版程式碼相容：遷移過程中需要支援舊版語法

esbuild-loader 的優勢

在回退到 Babel 之前，了解 esbuild 的優勢有助於做出更好的決策：

速度更快：esbuild 使用 Go 撰寫，比 Babel 快 10-100 倍
記憶體使用更低：對大型專案的編譯效率更高
熱模組替換更快：開發時的更新速度更快