自定义 Webpack 配置

您可以通过创建一个函数来覆盖它的 reducer 样式，该函数接受先前的 Webpack 配置并返回新的配置。

在命令行中渲染时

在您的 remotion.config.ts 文件中，您可以从 @remotion/cli/config 中调用 Config.overrideWebpackConfig()。

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});

info

使用 reducer 模式将有助于类型安全，提供自动完成，确保向前兼容性并保持完全灵活 - 您可以仅覆盖一个属性或传入一个全新的 Webpack 配置。

使用 `bundle()` 和 `deploySite()` 时

在使用 Node.JS API - bundle() 用于 SSR 或 deploySite() 用于 Lambda 时，您还需要提供 Webpack 覆盖，因为 Node.JS API 不会从配置文件中读取。我们建议您将 webpack 覆盖放在一个单独的文件中，以便您可以从命令行和您的 Node.JS 脚本中读取它。

src/webpack-override.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};

src/webpack-override.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};

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

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

使用 bundle 时：

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride,
});

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride,
});

或者在使用 deploySite 时：

my-script.js
ts
import { deploySite } from "@remotion/lambda";
import { webpackOverride } from "./src/webpack-override";
 
await deploySite({
  entryPoint: require.resolve("./src/index.ts"),
  region: "us-east-1",
  bucketName: "remotionlambda-c7fsl3d",
  options: {
    webpackOverride,
  },
  // ...other parameters
});

my-script.js
ts
import { deploySite } from "@remotion/lambda";
import { webpackOverride } from "./src/webpack-override";
 
await deploySite({
  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.ts
ts
export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: "@mdx-js/loader",
              options: {},
            },
          ],
        },
      ],
    },
  };
};

enable-mdx.ts
ts
export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: "@mdx-js/loader",
              options: {},
            },
          ],
        },
      ],
    },
  };
};

将其添加到配置文件中：

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableMdx } from "./src/enable-mdx";
 
Config.overrideWebpackConfig(enableMdx);

remotion.config.ts
ts
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.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          resourceQuery: { not: [/url/] }, // Exclude react component if *.svg?url
          use: ["@svgr/webpack"],
        },
        ...(currentConfiguration.module?.rules ?? []).map((r) => {
          if (r === "...") {
            return r;
          }
          if (!r.test?.toString().includes("svg")) {
            return r;
          }
          return {
            ...r,
            // Remove Remotion loading SVGs as a URL
            test: new RegExp(
              r.test.toString().replace(/svg\|/g, "").slice(1, -1),
            ),
          };
        }),
      ],
    },
  };
};

src/enable-svgr.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          resourceQuery: { not: [/url/] }, // Exclude react component if *.svg?url
          use: ["@svgr/webpack"],
        },
        ...(currentConfiguration.module?.rules ?? []).map((r) => {
          if (r === "...") {
            return r;
          }
          if (!r.test?.toString().includes("svg")) {
            return r;
          }
          return {
            ...r,
            // Remove Remotion loading SVGs as a URL
            test: new RegExp(
              r.test.toString().replace(/svg\|/g, "").slice(1, -1),
            ),
          };
        }),
      ],
    },
  };
};

将覆盖函数添加到您的 remotion.config.ts 文件中：

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSvgr } from "./src/enable-svgr";
 
Config.overrideWebpackConfig(enableSvgr);

remotion.config.ts
ts
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.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableGlsl: 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.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableGlsl: 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.ts
ts
import { Config } from "@remotion/cli/config";
import { enableGlsl } from "./src/enable-glsl";
 
Config.overrideWebpackConfig(enableGlsl);

remotion.config.ts
ts
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 - synchronous
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      syncWebAssembly: true,
    },
  };
});

remotion.config.ts - synchronous
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      syncWebAssembly: true,
    },
  };
});

note

由于 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.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
  const { enableSass } = await import("./src/enable-sass");
  return enableSass(currentConfiguration);
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
  const { enableSass } = await import("./src/enable-sass");
  return enableSass(currentConfiguration);
});

参见

配置文件

在命令行中渲染时​

使用 bundle() 和 deploySite() 时​

代码片段​

启用 MDX 支持​

启用 TailwindCSS 支持​

启用 SASS/SCSS 支持​

启用 SVGR 支持​

启用 GLSL 导入支持​

启用 WebAssembly​

使用传统的 babel loader​

启用 TypeScript 别名​

自定义配置文件位置​

在 remotion.config.ts 中导入 ES 模块v4.0.117​

参见​