Skip to main content

bundle()

@remotion/bundler 包的一部分.

🌐 Part of the @remotion/bundler package.

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

🌐 Bundles a Remotion project using Webpack and prepares it for rendering using renderMedia(). See a full server-side rendering example.

只有当源代码发生变化时，你才需要调用此函数。你可以从同一打包包中渲染多个视频，并使用 输入属性 对它们进行参数化。

🌐 You only need to call this function when the source code changes. You can render multiple videos from the same bundle and parametrize them using input props.

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

🌐 Calling bundle() for every video that you render is an anti-pattern.
bundle() cannot be called in a serverless function, see: Calling bundle() in bundled code.

示例​

🌐 Example

render.mjs
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,
});

参数​

🌐 Arguments

entryPoint​

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

🌐 A string containing an absolute path of the entry point of a Remotion project. In most Remotion project created with the template, the entry point is located at src/index.ts.

onProgress?​

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

🌐 A callback function that notifies about the progress of the Webpack bundling. Passes a number between 0 and 100. Example function:

const onProgress = (progress: number) => {
  console.log(`Webpack bundling progress: ${progress}%`);
};

webpackOverride?​

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

🌐 A function to override the webpack config reducer-style. Takes a function which gives you the current webpack config which you can transform and return a modified version of it. For example:

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

outDir?​

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

🌐 Specify a desired output directory. If no passed, the webpack bundle will be created in a temp dir.

askAIEnabled?​

If the Cmd + I shortcut of the Ask AI modal conflicts with your Studio, you can disable it using this.

rspack?​

是否使用 Rspack 代替 Webpack 作为打包工具。默认 false。

🌐 Whether to use Rspack instead of Webpack as the bundler. Default false.

keyboardShortcutsEnabled?​

Enable or disable keyboard shortcuts in the Remotion Studio.

enableCaching?​

Enable or disable Webpack caching. This flag is enabled by default, use --bundle-cache=false to disable caching.

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 的目录。默认情况下，它是当前工作目录。

🌐 The directory in which the Remotion project is rooted in. This should be set to the directory that contains the package.json which installs Remotion. By default, it is the current working directory.

note

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

publicDir?v3.2.13​

Define the location of the public/ directory. If not defined, Remotion will assume the location is the `public` folder in your Remotion root.

onPublicDirCopyProgress?v3.3.3​

在复制 public/ 目录时，报告已写入的字节数进度。如果目录很大，这对于提醒用户该操作较慢非常有用。

🌐 Reports progress of how many bytes have been written while copying the public/ directoy. Useful to warn the user if the directory is large that this operation is slow.

onSymlinkDetected?v3.3.3​

当在 public/ 目录中检测到符号链接时会被调用。由于 Remotion 会转发符号链接，向用户显示一个提示可能会很有用——如果原始符号链接被删除，打包包也会损坏。

🌐 Gets called when a symbolic link is detected in the public/ directory. Since Remotion will forward the symbolic link, it might be useful to display a hint to the user that if the original symbolic link gets deleted, the bundle will also break.

ignoreRegisterRootWarning?v3.3.46​

如果传入的入口文件不包含 registerRoot，则忽略抛出的错误。

🌐 Ignore an error that gets thrown if you pass an entry point file which does not contain registerRoot.

旧版函数签名​

🌐 Legacy function signature

v3.2.17 之前的 Remotion 版本使用以下函数签名：

🌐 Remotion versions earlier than v3.2.17 had the following function signature instead:

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

示例：

🌐 Example:

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

它在 Remotion v3 中仍然受支持，但我们鼓励迁移到新的函数签名。

🌐 It is still supported in Remotion v3, but we encourage to migrate to the new function signature.

返回值​

🌐 Return value

一个承诺，将解析为指定输出目录的 string。

🌐 A promise which will resolve into a string specifying the output directory.

另请参阅​

🌐 See also

Last updated on