Skip to main content

bundle()

@remotion/bundler 包的一部分。

使用 Webpack 打包 Remotion 项目，并使用 renderMedia() 准备渲染。查看完整的服务器端渲染示例。

只有在源代码更改时才需要调用此函数。您可以从同一个 bundle 渲染多个视频，并使用 输入属性 对它们进行参数化。

为每个要渲染的视频调用 bundle() 是一种反模式。
bundle() 不能在无服务器函数中调用，请参阅：在打包代码中调用 bundle()。

示例​

render.mjs
tsx
import path from "path";
import { bundle } from "@remotion/bundler";
 
const serveUrl = await bundle({
  entryPoint: path.join(process.cwd(), "./src/index.ts"),
  // If you have a webpack override in remotion.config.ts, pass it here as well.
  webpackOverride: (config) => config,
});
render.mjs
tsx
import path from "path";
import { bundle } from "@remotion/bundler";
 
const serveUrl = await bundle({
  entryPoint: path.join(process.cwd(), "./src/index.ts"),
  // If you have a webpack override in remotion.config.ts, pass it here as well.
  webpackOverride: (config) => config,
});

参数​

entryPoint​

包含 Remotion 项目入口点的绝对路径的 string。在大多数使用模板创建的 Remotion 项目中，入口点位于 src/index.ts。

onProgress?​

通知 Webpack 打包进度的回调函数。传递一个介于 0 和 100 之间的数字。示例函数：

ts
const onProgress = (progress: number) => {
  console.log(`Webpack 打包进度：${progress}%`);
};
ts
const onProgress = (progress: number) => {
  console.log(`Webpack 打包进度：${progress}%`);
};

webpackOverride?​

可选

一个函数，以 reducer 风格覆盖 webpack 配置。接受一个函数，该函数提供当前的 webpack 配置，您可以对其进行转换并返回修改后的版本。例如：

ts
const webpackOverride: WebpackOverrideFn = (webpackConfig) => {
  return {
    ...webpackConfig,
    // Override properties
  };
};
ts
const webpackOverride: WebpackOverrideFn = (webpackConfig) => {
  return {
    ...webpackConfig,
    // Override properties
  };
};

outDir?​

可选

指定所需的输出目录。如果未传递，则 webpack bundle 将在临时目录中创建。

enableCaching?​

可选

指定是否应启用 Webpack 缓存的 boolean。默认为 true，建议始终保持缓存启用，因为 Webpack 应该能够识别文件更改。

publicPath?​

可选

The path of the URL where the bundle is going to be hosted. By default it is /, meaning that the bundle is going to be hosted at the root of the domain (e.g. https://localhost:3000/). If you are deploying to a subdirectory (e.g. /sites/my-site/), you should set this to the subdirectory.

rootDir?v3.1.6​

可选

Remotion 项目的根目录。应设置为包含安装 Remotion 的 package.json 的目录。默认情况下，它是当前工作目录。

note

当前工作目录是程序执行的目录。它与调用 bundle() 的文件不同。

publicDir?v3.2.13​

设置可以使用 staticFile() 加载的文件所在的目录。默认情况下，它是位于 Remotion 根目录 中的 public/ 文件夹。如果传递相对路径，它将相对于 Remotion 根目录 解析。

onPublicDirCopyProgress?v3.3.3​

报告复制 public/ 目录时已写入多少字节的进度。如果目录很大，此操作速度较慢，可以用来警告用户。

onSymlinkDetected?v3.3.3​

当在 public/ 目录中检测到符号链接时调用。由于 Remotion 将转发符号链接，向用户显示提示可能很有用，如果原始符号链接被删除，捆绑包也将中断。

ignoreRegisterRootWarning?v3.3.46​

忽略传递不包含 registerRoot 的入口文件时抛出的错误。

旧函数签名​

Remotion 版本早于 v3.2.17 的函数签名如下：

ts
const bundle: (
  entryPoint: string,
  onProgress?: (progress: number) => void,
  options?: {
    webpackOverride?: WebpackOverrideFn;
    outDir?: string;
    enableCaching?: boolean;
    publicPath?: string;
    rootDir?: string;
    publicDir?: string | null;
  },
) => Promise<string>;
ts
const bundle: (
  entryPoint: string,
  onProgress?: (progress: number) => void,
  options?: {
    webpackOverride?: WebpackOverrideFn;
    outDir?: string;
    enableCaching?: boolean;
    publicPath?: string;
    rootDir?: string;
    publicDir?: string | null;
  },
) => Promise<string>;

示例：

ts
await bundle("src/index.ts", () => console.log(progress * 100 + "% done"), {
  webpackOverride,
});
ts
await bundle("src/index.ts", () => console.log(progress * 100 + "% done"), {
  webpackOverride,
});

Remotion v3 仍支持此函数签名，但我们建议迁移到新的函数签名。

返回值​

一个将解析为指定输出目录的 string 的 Promise。

参见​

Please paste the Markdown content you need to be translated into Chinese.