使用传统的 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。
示例
- npm
- yarn
- pnpm
bash
npm i babel-loader @babel/preset-env @babel/preset-react
bash
npm i babel-loader @babel/preset-env @babel/preset-react
bash
pnpm i babel-loader @babel/preset-env @babel/preset-react
bash
pnpm i babel-loader @babel/preset-env @babel/preset-react
bash
yarn add babel-loader @babel/preset-env @babel/preset-react
bash
yarn add babel-loader @babel/preset-env @babel/preset-react
remotion.config.tsts
import {replaceLoadersWithBabel } from "@remotion/babel-loader";Config .overrideWebpackConfig ((currentConfiguration ) => {returnreplaceLoadersWithBabel (currentConfiguration );});
remotion.config.tsts
import {replaceLoadersWithBabel } from "@remotion/babel-loader";Config .overrideWebpackConfig ((currentConfiguration ) => {returnreplaceLoadersWithBabel (currentConfiguration );});
当使用 bundle
或 deploySite
时
当使用 Node.JS API - bundle()
用于 SSR 或 deploySite()
用于 Lambda 时,您还需要提供 Webpack 覆盖,因为 Node.JS API 不会从配置文件中读取。
my-script.jsts
import {bundle } from "@remotion/bundler";import {replaceLoadersWithBabel } from "@remotion/babel-loader";awaitbundle ({entryPoint :require .resolve ("./src/index.ts"),webpackOverride : (config ) =>replaceLoadersWithBabel (config ),});
my-script.jsts
import {bundle } from "@remotion/bundler";import {replaceLoadersWithBabel } from "@remotion/babel-loader";awaitbundle ({entryPoint :require .resolve ("./src/index.ts"),webpackOverride : (config ) =>replaceLoadersWithBabel (config ),});