Rolldown ai翻译Rolldown 是一款基于 Rust 开发的新一代 JavaScript 构建工具（Bund

Rolldown 核心信息解析：新一代 JavaScript 构建工具

Rolldown 是一款基于 Rust 开发的新一代 JavaScript 构建工具（Bundler），核心定位是作为 Vite 的底层构建引擎，同时具备独立使用能力，旨在解决现有构建工具（esbuild、Rollup）在性能、生态兼容性和功能覆盖上的协同问题。以下从核心概念、设计目标、关键特性等维度展开解析：

一、基础认知：什么是 Bundler（构建工具）？

在 JavaScript 开发中，构建工具（Bundler） 的核心作用是将分散的小型代码模块（如 ESM 或 CommonJS 模块）编译、整合为更复杂的产物（如应用程序代码包或库），核心价值体现在：

提升 web 应用性能：即使在 HTTP/2 环境下，整合后的代码能减少网络请求次数、优化加载效率；
优化库的使用体验：避免下游应用重复打包源码，同时提升运行时执行性能；
解决模块化协同问题：处理模块依赖关系、语法兼容性（如 TS/JSX 转译）、资源整合（如 CSS、图片）等工程化需求。

二、Rolldown 的设计目标：为何开发这款新工具？

Rolldown 的核心初衷是为 Vite 提供统一的底层构建引擎，替代当前 Vite 依赖的「esbuild（开发环境）+ Rollup（生产环境）」组合，解决两者协同带来的兼容性、功能割裂问题。其设计目标可概括为三点：

1. 极致性能：基于 Rust 的速度优势

语言层面优化：采用 Rust 开发，摆脱 JavaScript 运行时的性能瓶颈，与 esbuild（Go 开发）性能处于同一级别，且比 Rollup（JS 开发）快 10~30 倍；
WASM 性能更优：即使编译为 WASM 版本，由于 Go 语言在 WASM 编译上的先天局限，Rolldown 的 WASM 版本性能仍显著优于 esbuild 的 WASM 版本。

2. 生态兼容性：无缝衔接 Rollup/Vite 生态

插件 API 兼容：支持与 Rollup、Vite 完全一致的插件接口，确保 Vite 现有生态中的插件（如 vite-plugin-vue、vite-plugin-ts）无需修改即可使用；
使用场景兼容：可作为 Rollup 的「即插即用替代品」（Drop-in Replacement），也可在需要更精细代码分割控制时替代 esbuild，降低迁移成本。

3. 功能补全：覆盖 Vite 所需的关键特性

esbuild 和 Rollup 因设计定位不同，均存在 Vite 所需但难以实现的功能，而 Rolldown 原生支持这些特性，例如：

更灵活的代码分割控制、HMR（热模块替换）支持（开发中）、Module Federation（模块联邦，规划中）等，无需依赖多工具组合实现。

三、Rolldown 的核心特性范围

Rolldown 兼顾了 Rollup 的生态兼容性和 esbuild 的功能全面性，同时新增了两者均不具备的特性，可分为「兼容特性」「类 esbuild 特性」「独有特性」三类：

1. 与 Rollup 兼容的核心特性

API 与插件生态：保持与 Rollup 一致的核心 API（如 rollup.rollup()、rollup.watch()）和插件钩子（如 resolveId、load、transform）；
Tree-shaking 能力：具备与 Rollup 同级别的代码摇树优化，可精准移除未使用的代码，减少产物体积。

2. 类 esbuild 的内置特性（无需额外插件）

相比 Rollup 需要依赖插件实现的功能，Rolldown 原生支持以下「开箱即用」特性（与 esbuild 类似）：

特性类别	具体能力
平台预设（Platform Presets）	针对浏览器、Node.js 等不同平台，自动调整模块解析、产物格式（如 CJS/ESM）
语法转译	原生支持 TypeScript、JSX 转译，以及 ES6+ 语法向下兼容（如箭头函数转译）
Node.js 模块解析兼容	支持 Node.js 的 `node_modules` 解析规则、`require`/`import` 混用场景
模块互操作（Interop）	自动处理 ESM 与 CJS 模块的互操作问题（如 `default` 导出兼容）
资源注入	支持 `define`（环境变量替换）、`inject`（全局模块注入）等工程化能力
CSS 打包（实验性）	原生整合 CSS 资源，无需依赖 `rollup-plugin-css-only` 等插件
代码压缩（开发中）	后续将原生支持 JS/CSS 压缩，无需依赖 `terser`、`cssnano`

3. Rolldown 独有的创新特性

这些特性是 esbuild 和 Rollup 均未实现（或不计划实现）的，专门针对复杂工程化场景设计：

高级代码分割控制（实验性） ：比 Rollup 的 manualChunks 更灵活，支持按模块依赖深度、体积、业务维度自定义分割规则，解决大型应用的「chunk 碎片化」问题；
插件钩子过滤（Plugin Hook Filters） ：允许插件针对特定模块路径、类型设置钩子触发条件，减少不必要的钩子执行，提升构建速度；
模块类型（Module Types，实验性） ：原生区分「脚本模块（Script）」「样式模块（CSS）」「资产模块（Asset，如图片）」，简化资源处理逻辑；
HMR 支持（开发中） ：原生实现热模块替换，无需像 Vite 现在这样依赖「esbuild 转译 + 自定义 HMR 逻辑」的组合方案；
Module Federation（规划中） ：支持跨应用模块共享，满足微前端等场景的需求，无需额外集成 @module-federation/rollup-plugin。

四、总结：Rolldown 的定位与价值

Rolldown 并非简单替代 esbuild 或 Rollup，而是通过「性能（Rust）+ 兼容性（Rollup 生态）+ 功能全面性（esbuild 特性 + 独有创新）」的组合，解决当前前端构建工具的「性能与生态割裂」问题：

对 Vite 用户：未来无需关注「开发环境用 esbuild、生产环境用 Rollup」的差异，底层统一为 Rolldown，减少配置复杂度和兼容性问题；
对 Rollup 用户：可无缝迁移到 Rolldown，获得 10~30 倍的构建速度提升，同时保留现有插件和工作流；
对 esbuild 用户：在需要更精细的代码分割、Tree-shaking 或 Vite 生态兼容时，Rolldown 是更优选择。

其最终目标是成为前端构建领域的「统一解决方案」，兼顾性能、生态和功能灵活性，降低工程化门槛。

Rolldown 快速上手指南（基于官方文档）

Rolldown 作为新一代 Rust 构建工具，目前处于 Beta 阶段，已能应对多数生产场景（需注意内置代码压缩功能仍在开发中）。以下是从安装到插件使用的完整入门流程，帮助你快速搭建第一个 Rolldown 构建项目。

一、安装 Rolldown

Rolldown 支持主流包管理器（npm/pnpm/yarn/bun），推荐使用 pnpm 或 npm 安装（开发依赖）：

包管理器	安装命令
npm	`npm install -D rolldown`
pnpm	`pnpm add -D rolldown`
yarn	`yarn add -D rolldown`
bun	`bun add -D rolldown`

版本选择（Release Channels）

稳定版（默认） ：latest 标签，版本格式为 1.0.0-beta.*，适合大多数场景；
开发版：从主分支持续发布，需通过 commit SHA 安装（适合测试新特性）：npm install -D https://pkg.pr.new/rolldown@<commit-sha>（<commit-sha> 需替换为 pkg.pr.new/rolldown 上的有效构建 SHA 值）。

验证安装

安装后通过 CLI 命令验证版本，确认安装成功：

bash

# 查看版本（npm 安装路径）
./node_modules/.bin/rolldown --version

# 查看所有 CLI 选项（含示例）
./node_modules/.bin/rolldown --help

二、创建第一个构建项目（基础 CLI 方式）

无需配置文件，通过 CLI 直接构建简单的 JS 模块，快速体验 Rolldown 功能。

1. 准备源码文件

在项目根目录创建 src 文件夹，添加两个 JS 文件：

src/main.js（入口文件）：

javascript

运行

// 导入 hello 函数
import { hello } from './hello.js';
// 执行函数
hello();

src/hello.js（依赖模块）：

javascript

运行

// 导出 hello 函数
export function hello() {
  console.log('Hello Rolldown!');
}

2. 执行构建

通过 CLI 指定入口文件和输出文件，运行构建命令：

bash

./node_modules/.bin/rolldown src/main.js --file bundle.js

src/main.js：构建入口（必选）；
--file bundle.js：指定输出文件为根目录的 bundle.js（若不指定，默认输出到 dist 文件夹）。

3. 验证构建结果

构建完成后，根目录会生成 bundle.js，运行该文件验证功能：

bash

node bundle.js

若终端输出 Hello Rolldown!，说明构建成功。

三、通过 npm scripts 简化命令

频繁输入长路径 CLI 命令繁琐，可将构建命令配置到 package.json 的 scripts 中，简化调用。

1. 配置 package.json

json

{
  "name": "my-rolldown-project",
  "type": "module", // 启用 ESM 模块（可选，Rolldown 同时支持 CJS/ESM）
  "scripts": {
    // 简化构建命令：rolldown 入口文件 --输出文件
    "build": "rolldown src/main.js --file bundle.js"
  },
  "devDependencies": {
    "rolldown": "^1.0.0-beta.1" // 确保版本与安装一致
  }
}

2. 运行构建

通过 npm 脚本执行构建，命令更简洁：

bash

# npm 方式
npm run build

# pnpm 方式（若用 pnpm 安装）
pnpm run build

四、使用配置文件（推荐，支持复杂场景）

当需要自定义输出格式、代码分割、插件等高级功能时，推荐使用配置文件（支持 JS/TS 格式），灵活性更高。

1. 创建 JS 配置文件（基础版）

项目根目录创建 rolldown.config.js，使用 defineConfig helper 获得类型提示（推荐）：

javascript

运行

// 导入 defineConfig  helper（用于类型提示）
import { defineConfig } from 'rolldown';

// 导出配置对象
export default defineConfig({
  input: 'src/main.js', // 构建入口（与 CLI 一致）
  output: {
    file: 'bundle.js', // 输出文件（与 CLI 一致）
    format: 'esm', // 输出模块格式（可选：esm/cjs/iife，默认 esm）
    sourcemap: true // 生成 sourcemap（可选，便于调试）
  }
});

defineConfig：仅用于提供 TypeScript 类型提示，不影响运行逻辑，若不需要类型提示，直接导出 plain object 也可；
output.format：
- esm：输出 ESM 模块（支持 import/export）；
- cjs：输出 CommonJS 模块（支持 require/module.exports）；
- iife：输出立即执行函数（适合浏览器环境，无模块依赖）。

2. 通过配置文件构建

修改 package.json 的 scripts，指定使用配置文件：

json

{
  "scripts": {
    // -c 是 --config 的简写，默认读取 rolldown.config.js
    "build": "rolldown -c"
  }
}

运行构建命令：

bash

npm run build

Rolldown 会自动读取 rolldown.config.js 的配置，执行构建。

3. 进阶：使用 TypeScript 配置文件

Rolldown 原生支持 TS 配置文件，无需额外安装 ts-node，只需将配置文件后缀改为 .ts。

（1）创建 rolldown.config.ts

typescript

import { defineConfig } from 'rolldown';

// TypeScript 类型自动提示
export default defineConfig({
  input: 'src/main.js',
  output: {
    dir: 'dist', // 输出到文件夹（多 chunk 时用 dir，单文件用 file）
    format: 'cjs',
    sourcemap: 'inline' // 内联 sourcemap 到输出文件
  }
});

（2）修改 package.json 脚本

指定 TS 配置文件路径：

json

{
  "scripts": {
    // 明确指定 TS 配置文件
    "build": "rolldown -c rolldown.config.ts"
  }
}

4. 进阶：多构建配置（并行处理多个入口）

若需同时构建多个独立入口（如主应用 + worker 脚本），可在配置文件中导出配置数组，Rolldown 会并行处理。

javascript

运行

import { defineConfig } from 'rolldown';

export default defineConfig([
  // 配置 1：构建主应用（ESM 格式）
  {
    input: 'src/main.js',
    output: {
      format: 'esm',
      dir: 'dist/app' // 输出到 dist/app 文件夹
    }
  },
  // 配置 2：构建 Worker 脚本（IIFE 格式，浏览器直接运行）
  {
    input: 'src/worker.js',
    output: {
      format: 'iife',
      dir: 'dist/worker', // 输出到 dist/worker 文件夹
      name: 'WorkerScript' // IIFE 全局变量名（浏览器中通过 window.WorkerScript 访问）
    }
  }
]);

五、使用插件（兼容 Rollup 生态）

Rolldown 的插件 API 与 Rollup 完全一致，可直接复用大多数 Rollup 插件（如处理 Vue、React、CSS 等）。但需注意：Rolldown 已内置诸多功能（如 TS/JSX 转译、CSS 打包），无需重复使用对应 Rollup 插件。

1. 插件使用原则

优先用内置功能：Rolldown 原生支持 TS/JSX 转译、Node.js 模块解析、CSS 打包（实验性），无需安装 @rollup/plugin-typescript、rollup-plugin-css-only 等插件；
必要时用 Rollup 插件：若需处理特殊场景（如 Vue 单文件组件、图片资源），可安装 Rollup 生态的插件（如 @vitejs/plugin-vue，需确保插件兼容 Rollup API）。

2. 示例：使用 Rollup 插件（以处理 JSON 为例）

Rolldown 暂未内置 JSON 解析功能，可使用 Rollup 官方的 @rollup/plugin-json 插件。

（1）安装插件

bash

npm install -D @rollup/plugin-json

（2）配置插件到 rolldown.config.js

javascript

运行

import { defineConfig } from 'rolldown';
import json from '@rollup/plugin-json'; // 导入插件

export default defineConfig({
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'esm'
  },
  plugins: [json()] // 启用 JSON 插件（插件执行顺序按数组顺序）
});

（3）测试 JSON 解析

创建 src/config.json：

json

{
  "appName": "Rolldown Demo",
  "version": "1.0.0"
}

在 src/main.js 中导入 JSON：

javascript

运行

import { hello } from './hello.js';
import config from './config.json'; // 导入 JSON

hello();
console.log('App Info:', config.appName, config.version);

运行 npm run build 后，执行 node bundle.js，终端会输出 JSON 中的配置信息，说明插件生效。

六、关键注意事项

Beta 阶段限制：内置代码压缩（minification）仍在开发中，若需压缩产物，暂时需配合 terser 等工具；
配置文件后缀：使用 .ts 或 .mjs 配置文件时，需通过 rolldown -c 文件名 明确指定路径（默认只识别 rolldown.config.js）；
模块兼容性：Rolldown 同时支持 ESM（import/export）和 CommonJS（require/module.exports），无需额外配置；
与 Rollup 差异：Rolldown 虽兼容 Rollup 插件和大部分配置，但部分 Rollup 高级功能（如 output.generatedCode）可能暂不支持，需参考官方文档确认。

通过以上步骤，你已掌握 Rolldown 的基础使用流程，可根据项目需求逐步探索代码分割、平台预设、TS/JSX 转译等高级功能。

Rolldown 编程 API 详解（含 Watcher）

Rolldown 提供了与 Rollup 兼容的 JavaScript 编程 API，支持通过代码方式控制构建流程，包括分步构建、内存生成、磁盘写入和监听模式。以下是 API 的详细使用指南：

一、核心构建 API：`rolldown()` 与 `build()`

Rolldown 提供两种主要编程接口：分步 API（rolldown()） 和 简洁 API（build()） ，分别适用于不同场景。

1. 分步构建 API（`rolldown()`）

此 API 将构建过程拆分为输入配置和输出生成两个步骤，支持基于同一输入生成多种输出格式（如同时生成 ESM 和 CJS 产物）。

基本用法：

javascript

运行

import { rolldown } from 'rolldown';

// 步骤 1：配置输入（解析模块、构建依赖图）
const bundle = await rolldown({
  // 输入选项（与配置文件的 input 部分一致）
  input: 'src/main.js', // 入口文件
  // 可选：插件、解析配置等
  plugins: [],
  resolve: {
    extensions: ['.js', '.ts'] // 自定义模块解析扩展名
  }
});

// 步骤 2.1：在内存中生成 ESM 格式产物（不写入磁盘）
const esmOutput = await bundle.generate({
  format: 'esm', // 输出格式
  sourcemap: true // 生成 sourcemap
});
// esmOutput 包含生成的代码和资源信息
console.log('ESM 产物:', esmOutput.output);

// 步骤 2.2：在内存中生成 CJS 格式产物
const cjsOutput = await bundle.generate({
  format: 'cjs',
  file: 'dist/bundle.cjs' // 虚拟输出路径（仅用于标识）
});

// 步骤 2.3：直接写入磁盘（生成物理文件）
await bundle.write({
  format: 'iife',
  file: 'dist/bundle.iife.js' // 实际输出路径
});

适用场景：

需要基于同一源码生成多种格式（如库作者同时发布 ESM 和 CJS 版本）；
需在写入磁盘前处理生成的代码（如自定义修改产物内容）。

2. 简洁构建 API（`build()`）

此 API 合并了输入和输出配置，直接执行构建并默认写入磁盘，用法更简洁（类似配置文件的编程式调用）。

基本用法：

javascript

运行

import { build } from 'rolldown';

// 直接构建并写入磁盘（默认行为）
await build({
  // 输入配置
  input: 'src/main.js',
  // 输出配置（与配置文件的 output 部分一致）
  output: {
    dir: 'dist', // 输出目录（多文件时使用）
    format: 'esm',
    sourcemap: 'inline' // 内联 sourcemap
  },
  // 其他配置（如插件）
  plugins: []
});

与分步 API 的区别：

无需手动调用 generate 或 write，配置中指定 output 后直接生成；
适合单种输出格式的场景，代码更简洁。

二、监听模式 API（`watch()`）

Rolldown 的监听 API 与 Rollup 兼容，可监听源码变化并自动重新构建，适合开发环境。

基本用法：

javascript

运行

import { watch } from 'rolldown';

// 创建监听器（支持单配置或多配置数组）
const watcher = watch({
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm'
  }
});

// 监听构建事件
watcher.on('event', (event) => {
  switch (event.code) {
    case 'START':
      console.log('开始构建...');
      break;
    case 'END':
      console.log('构建完成！');
      // 构建完成后可获取输出信息
      if (event.result) {
        console.log('输出文件:', event.result.output.map(f => f.fileName));
        // 释放资源（重要，避免内存泄漏）
        event.result.close();
      }
      break;
    case 'ERROR':
      console.error('构建错误:', event.error);
      break;
  }
});

// 关闭监听器（返回 Promise，与 Rollup 不同）
// 例如：在进程退出时关闭
process.on('SIGINT', async () => {
  await watcher.close();
  process.exit(0);
});

关键特性：

事件驱动：通过 event.code 区分不同阶段（START/END/ERROR 等）；
资源释放：每次构建完成后需调用 event.result.close()，避免内存泄漏；

多配置支持：可传入配置数组，同时监听多个构建任务：

javascript

运行

watch([
  { input: 'src/app.js', output: { dir: 'dist/app' } },
  { input: 'src/worker.js', output: { dir: 'dist/worker' } }
]);

三、API 与配置文件的关系

Rolldown 的编程 API 选项与配置文件（rolldown.config.js）完全一致，区别仅在于使用方式：

配置文件是声明式的，适合大多数构建场景；
编程 API 是命令式的，适合需要动态生成配置（如根据环境变量调整选项）或集成到其他工具中的场景。

例如，动态调整输出格式：

javascript

运行

import { build } from 'rolldown';

const isProd = process.env.NODE_ENV === 'production';

await build({
  input: 'src/main.js',
  output: {
    file: isProd ? 'dist/bundle.min.js' : 'dist/bundle.js',
    format: isProd ? 'iife' : 'esm'
  }
});

四、与 Rollup API 的差异

虽然 Rolldown 兼容 Rollup API，但有一处关键区别：

watcher.close() 返回 Promise：Rolldown 中关闭监听器的方法是异步的，需用 await 等待资源释放；而 Rollup 的 close() 是同步的，返回 void。

javascript

运行

// Rolldown（正确用法）
await watcher.close();

// Rollup（不同）
watcher.close(); // 无返回值

五、总结

Rolldown 的编程 API 提供了灵活的构建控制方式：

rolldown() ：分步处理，支持多格式输出，适合复杂构建场景；
build() ：简洁高效，直接生成产物，适合单格式构建；
watch() ：监听文件变化，自动重构建，适合开发环境。

通过这些 API，可将 Rolldown 集成到自定义构建脚本、开发工具或 CI/CD 流程中，充分利用其 Rust 驱动的高性能优势。

Rolldown ai翻译

Rolldown 核心信息解析：新一代 JavaScript 构建工具

一、基础认知：什么是 Bundler（构建工具）？

二、Rolldown 的设计目标：为何开发这款新工具？

1. 极致性能：基于 Rust 的速度优势

2. 生态兼容性：无缝衔接 Rollup/Vite 生态

3. 功能补全：覆盖 Vite 所需的关键特性

三、Rolldown 的核心特性范围

1. 与 Rollup 兼容的核心特性

2. 类 esbuild 的内置特性（无需额外插件）

3. Rolldown 独有的创新特性

四、总结：Rolldown 的定位与价值

Rolldown 快速上手指南（基于官方文档）

一、安装 Rolldown

版本选择（Release Channels）

验证安装

二、创建第一个构建项目（基础 CLI 方式）

1. 准备源码文件

2. 执行构建

3. 验证构建结果

三、通过 npm scripts 简化命令

1. 配置 package.json

2. 运行构建

四、使用配置文件（推荐，支持复杂场景）

1. 创建 JS 配置文件（基础版）

2. 通过配置文件构建

3. 进阶：使用 TypeScript 配置文件

（1）创建 rolldown.config.ts

（2）修改 package.json 脚本

4. 进阶：多构建配置（并行处理多个入口）

五、使用插件（兼容 Rollup 生态）

1. 插件使用原则

2. 示例：使用 Rollup 插件（以处理 JSON 为例）

（1）安装插件

（2）配置插件到 rolldown.config.js

（3）测试 JSON 解析

六、关键注意事项

Rolldown 编程 API 详解（含 Watcher）

一、核心构建 API：rolldown() 与 build()

1. 分步构建 API（rolldown()）

基本用法：

适用场景：

2. 简洁构建 API（build()）

基本用法：

与分步 API 的区别：

二、监听模式 API（watch()）

基本用法：

关键特性：

三、API 与配置文件的关系

四、与 Rollup API 的差异

五、总结

一、核心构建 API：`rolldown()` 与 `build()`

1. 分步构建 API（`rolldown()`）

2. 简洁构建 API（`build()`）

二、监听模式 API（`watch()`）