自定义 Webpack 配置
Remotion 集成了自己的 Webpack 配置。
您可以通过创建一个函数来覆盖它的 reducer 样式,该函数接受先前的 Webpack 配置并返回新的配置。
在命令行中渲染时
在您的 remotion.config.ts
文件中,您可以从 @remotion/cli/config
中调用 Config.overrideWebpackConfig()
。
remotion.config.tsts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?? []),// Add more loaders here],},};});
remotion.config.tsts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?? []),// Add more loaders here],},};});
使用 reducer 模式将有助于类型安全,提供自动完成,确保向前兼容性并保持完全灵活 - 您可以仅覆盖一个属性或传入一个全新的 Webpack 配置。
使用 bundle()
和 deploySite()
时
在使用 Node.JS API - bundle()
用于 SSR 或 deploySite()
用于 Lambda 时,您还需要提供 Webpack 覆盖,因为 Node.JS API 不会从配置文件中读取。我们建议您将 webpack 覆盖放在一个单独的文件中,以便您可以从命令行和您的 Node.JS 脚本中读取它。
src/webpack-override.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constwebpackOverride :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,// Your override here};};
src/webpack-override.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constwebpackOverride :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,// Your override here};};
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {webpackOverride } from "./src/webpack-override";Config .overrideWebpackConfig (webpackOverride );
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {webpackOverride } from "./src/webpack-override";Config .overrideWebpackConfig (webpackOverride );
使用 bundle
时:
my-script.jsts
import {bundle } from "@remotion/bundler";import {webpackOverride } from "./src/webpack-override";awaitbundle ({entryPoint :require .resolve ("./src/index.ts"),webpackOverride ,});
my-script.jsts
import {bundle } from "@remotion/bundler";import {webpackOverride } from "./src/webpack-override";awaitbundle ({entryPoint :require .resolve ("./src/index.ts"),webpackOverride ,});
或者在使用 deploySite
时:
my-script.jsts
import {deploySite } from "@remotion/lambda";import {webpackOverride } from "./src/webpack-override";awaitdeploySite ({entryPoint :require .resolve ("./src/index.ts"),region : "us-east-1",bucketName : "remotionlambda-c7fsl3d",options : {webpackOverride ,},// ...other parameters});
my-script.jsts
import {deploySite } from "@remotion/lambda";import {webpackOverride } from "./src/webpack-override";awaitdeploySite ({entryPoint :require .resolve ("./src/index.ts"),region : "us-east-1",bucketName : "remotionlambda-c7fsl3d",options : {webpackOverride ,},// ...other parameters});
代码片段
启用 MDX 支持
- 安装以下依赖项:
- npm
- yarn
- pnpm
- bun
npm i --save-exact @mdx-js/loader @mdx-js/react
npm i --save-exact @mdx-js/loader @mdx-js/react
pnpm i @mdx-js/loader @mdx-js/react
pnpm i @mdx-js/loader @mdx-js/react
bun i @mdx-js/loader @mdx-js/react
bun i @mdx-js/loader @mdx-js/react
yarn --exact add @mdx-js/loader @mdx-js/react
yarn --exact add @mdx-js/loader @mdx-js/react
- 创建一个带有 Webpack 覆盖的文件:
enable-mdx.tsts
export constenableMdx :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?currentConfiguration .module .rules : []),{test : /\.mdx?$/,use : [{loader : "@mdx-js/loader",options : {},},],},],},};};
enable-mdx.tsts
export constenableMdx :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?currentConfiguration .module .rules : []),{test : /\.mdx?$/,use : [{loader : "@mdx-js/loader",options : {},},],},],},};};
- 将其添加到配置文件中:
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableMdx } from "./src/enable-mdx";Config .overrideWebpackConfig (enableMdx );
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableMdx } from "./src/enable-mdx";Config .overrideWebpackConfig (enableMdx );
-
如果需要,也将其添加到您的Node.JS API调用中。
-
在您的项目中创建一个包含
declare module '*.mdx';
的文件,以修复 TypeScript 错误。
启用 TailwindCSS 支持
启用 SASS/SCSS 支持
最简单的方法是使用 @remotion/enable-scss
。
按照这些说明来启用它。
启用 SVGR 支持
这允许您将 import
SVG 文件作为 React 组件。
- 安装以下依赖项:
- npm
- yarn
- pnpm
- bun
npm i --save-exact @svgr/webpack
npm i --save-exact @svgr/webpack
pnpm i @svgr/webpack
pnpm i @svgr/webpack
bun i @svgr/webpack
bun i @svgr/webpack
yarn --exact add @svgr/webpack
yarn --exact add @svgr/webpack
- 声明一个覆盖函数:
src/enable-svgr.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constenableSvgr :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [{test : /\.svg$/i,issuer : /\.[jt]sx?$/,resourceQuery : {not : [/url/] }, // Exclude react component if *.svg?urluse : ["@svgr/webpack"],},...(currentConfiguration .module ?.rules ?? []).map ((r ) => {if (r === "...") {returnr ;}if (!r .test ?.toString ().includes ("svg")) {returnr ;}return {...r ,// Remove Remotion loading SVGs as a URLtest : newRegExp (r .test .toString ().replace (/svg\|/g, "").slice (1, -1),),};}),],},};};
src/enable-svgr.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constenableSvgr :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [{test : /\.svg$/i,issuer : /\.[jt]sx?$/,resourceQuery : {not : [/url/] }, // Exclude react component if *.svg?urluse : ["@svgr/webpack"],},...(currentConfiguration .module ?.rules ?? []).map ((r ) => {if (r === "...") {returnr ;}if (!r .test ?.toString ().includes ("svg")) {returnr ;}return {...r ,// Remove Remotion loading SVGs as a URLtest : newRegExp (r .test .toString ().replace (/svg\|/g, "").slice (1, -1),),};}),],},};};
- 将覆盖函数添加到您的
remotion.config.ts
文件中:
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableSvgr } from "./src/enable-svgr";Config .overrideWebpackConfig (enableSvgr );
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableSvgr } from "./src/enable-svgr";Config .overrideWebpackConfig (enableSvgr );
-
如果需要,也将其添加到您的Node.JS API调用中。
-
重新启动 Remotion Studio。
启用 GLSL 导入支持
- 安装以下依赖项:
- npm
- yarn
- pnpm
- bun
npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader
npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader
pnpm i glsl-shader-loader glslify glslify-import-loader raw-loader
pnpm i glsl-shader-loader glslify glslify-import-loader raw-loader
bun i glsl-shader-loader glslify glslify-import-loader raw-loader
bun i glsl-shader-loader glslify glslify-import-loader raw-loader
yarn --exact add glsl-shader-loader glslify glslify-import-loader raw-loader
yarn --exact add glsl-shader-loader glslify glslify-import-loader raw-loader
- 声明一个 webpack 覆盖:
src/enable.glsl.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constenableGlsl :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?currentConfiguration .module .rules : []),{test : /\.(glsl|vs|fs|vert|frag)$/,exclude : /node_modules/,use : ["glslify-import-loader", "raw-loader", "glslify-loader"],},],},};};
src/enable.glsl.tsts
import {WebpackOverrideFn } from "@remotion/bundler";export constenableGlsl :WebpackOverrideFn = (currentConfiguration ) => {return {...currentConfiguration ,module : {...currentConfiguration .module ,rules : [...(currentConfiguration .module ?.rules ?currentConfiguration .module .rules : []),{test : /\.(glsl|vs|fs|vert|frag)$/,exclude : /node_modules/,use : ["glslify-import-loader", "raw-loader", "glslify-loader"],},],},};};
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableGlsl } from "./src/enable-glsl";Config .overrideWebpackConfig (enableGlsl );
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableGlsl } from "./src/enable-glsl";Config .overrideWebpackConfig (enableGlsl );
- 将以下内容添加到您的入口点(例如
src/index.ts
):
ts
declare module "*.glsl" {const value: string;export default value;}
ts
declare module "*.glsl" {const value: string;export default value;}
-
如果需要,也将其添加到您的Node.JS API调用中。
-
通过删除
node_modules/.cache
文件夹来重置 webpack 缓存。 -
重新启动 Remotion Studio。
启用 WebAssembly
有两种 WebAssembly 模式:异步和同步。我们建议测试两种模式,看看哪种适用于您尝试使用的 WASM 库。
remotion.config.ts - synchronousts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((conf ) => {return {...conf ,experiments : {syncWebAssembly : true,},};});
remotion.config.ts - synchronousts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((conf ) => {return {...conf ,experiments : {syncWebAssembly : true,},};});
由于 Webpack 不允许在主块中使用同步 WebAssembly 代码,您很可能需要使用 lazyComponent
来声明您的组合,而不是 component
。查看一个演示项目以获取示例。
remotion.config.ts - 异步ts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((conf ) => {return {...conf ,experiments : {asyncWebAssembly : true,},};});
remotion.config.ts - 异步ts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig ((conf ) => {return {...conf ,experiments : {asyncWebAssembly : true,},};});
完成后,请清除 Webpack 缓存:
bash
rm -rf node_modules/.cache
bash
rm -rf node_modules/.cache
重新启动后,您可以使用 import 语句导入 .wasm
文件。
如果需要,在您的 Node.JS API 调用 中添加 Webpack 覆盖。
使用传统的 babel loader
请参阅使用传统的 Babel 转译。
启用 TypeScript 别名
请参阅TypeScript 别名。
自定义配置文件位置
您可以在命令行中传递 --config
选项来指定配置文件的自定义位置。
在 remotion.config.ts 中导入 ES 模块v4.0.117
配置文件 在 CommonJS 环境中执行。如果您想要导入 ES 模块,可以将异步函数传递给 Config.overrideWebpackConfig
:
remotion.config.tsts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig (async (currentConfiguration ) => {const {enableSass } = await import("./src/enable-sass");returnenableSass (currentConfiguration );});
remotion.config.tsts
import {Config } from "@remotion/cli/config";Config .overrideWebpackConfig (async (currentConfiguration ) => {const {enableSass } = await import("./src/enable-sass");returnenableSass (currentConfiguration );});