介绍#

Modern.js Builder 是一个基于 Rspack 的 Web 构建工具。

随着前端生态的发展，社区中出现了多样化的编译工具和插件。对于大部分开发者来说，构建一个 Web 应用所需的配置和依赖已变得十分复杂。在追求最佳实践的过程中，开发者需要付出的成本也在不断上升。

为了减少构建的复杂性，降低上手门槛，我们基于 Modern.js 在 Web 应用构建方面的实践经验，抽象其中的构建能力，打造出 Modern.js Builder 这个构建工具。

Rust 化#

近年来，前端工具链的发展趋势是使用 Rust 等编程语言重新实现 —— 以获得更好的性能表现。社区中出现 Rspack、SWC 等高性能工具，并且应用领域在逐步扩宽。但这些 Rust 工具与 JavaScript 工具之间存在较多差异，包括功能不完整、配置不一致等，导致使用者需要承担一定的迁移成本。

前端工具链 Rust 化的进程还会持续较长一段时间，Modern.js Builder 期望能帮助开发者更好地过渡到 Rust 工具。不管是 JavaScript 工具，还是 Rust 工具，甚至是 webpack 等底层 bundler，在 Modern.js Builder 中都是可替换的零部件。你可以通过开启配置或启用插件的方式，对这些零部件进行渐进式替换，Modern.js Builder 会抹平其中的主要差异，帮助使用者进行低成本迁移。

定位#

Modern.js Builder (简称 Builder) 的定位是服务于上层框架的构建工具，它专注于解决 Web 应用构建面临的各类问题，期望能为前端框架提供开箱即用的构建能力。

如果你正在开发一个前端框架，或是开发一个前端应用的脚手架，那么 Builder 可以为你完成前端框架中大部分与构建有关的逻辑，让你能够聚焦于实现框架的其他功能。

如果你是一名业务开发者，大部分情况下，你不需要在业务项目中手动接入 Builder，我们推荐你直接使用一些基于 Builder 的上层框架。

目前已经接入 Builder 的前端框架有：

• 开源的 Modern.js 框架。
• 字节跳动内部的 EdenX、PIA 等框架。

特性#

支持 Rspack 打包#

Builder 支持 webpack 和 Rspack 两种打包工具，你可以在成熟的 Webpack 和更快的 Rspack 之间进行切换。

默认情况下，Builder 使用 webpack 5 作为打包工具，尽管 webpack 的编译速度不是很理想，但它依然是社区中功能最完整、生态最丰富的打包工具。Builder 在 webpack 的基础上，集成了 Babel、PostCSS、terser 等工具进行代码转义和压缩。Builder 也支持替换部分编译能力为原生工具来提升编译速度，比如将 Babel / terser 替换为 swc 或 esbuild。

如果你对构建性能有更极致的需求，可以一键切换到 Rspack 构建模式，请参考 使用 Rspack 来进行切换。

深度优化构建产物#

Builder 充分利用 webpack 生态内的各种优化手段，保证生产环境的产物性能得到深度优化，并在稳定性上提供保障。

以拆包场景为例，webpack 原生的 splitChunks 配置较为复杂，Builder 将其封装为开箱即用的 performance.chunkSplit 配置项，默认将常见的三方库拆分为体积适中的 chunk，使页面加载速度达到最优状态。

易于扩展的插件系统#

Builder 提供丰富的配置项和可插拔的插件系统，支持对各项能力进行扩展和定制。

对于 Builder 来说，所有的构建能力都是通过插件来实现的：

• 大部分插件较为轻量，被内置在 Builder 内部，开发者可以通过配置项来控制启用。
• 少部分插件较为复杂，被外置为独立 npm 包，开发者可以按需进行安装和使用。

Builder 也支持自定义插件，因此框架开发者可以开发自定义的插件，实现定制化的构建需求。

npm 包#

Builder 已发布的 npm 包有：

包名	版本	描述
@modern-js/builder		Builder 核心包
@modern-js/builder-cli		Builder CLI 工具
@modern-js/builder-webpack-provider		提供 webpack 构建能力
@modern-js/builder-rspack-provider		提供 Rspack 构建能力
@modern-js/builder-plugin-vue		Vue 3 插件
@modern-js/builder-plugin-vue2		Vue 2 插件
@modern-js/builder-plugin-swc		SWC 插件
@modern-js/builder-plugin-stylus		Stylus 插件
@modern-js/builder-plugin-esbuild		Esbuild 插件
@modern-js/builder-plugin-node-polyfill		Node Polyfill 插件
@modern-js/builder-plugin-image-compress		Image Compress 插件
@modern-js/builder-shared		Builder 内部的公共模块
@modern-js/builder-doc		Builder 文档

你可以在 modern.js 仓库的 packages/builder 目录下查看这些包的源代码。

下一步#

你可能想要：