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 打包进度的回调函数。传递一个介于 0100 之间的数字。示例函数:

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.