Modern.js Builder 是一个基于 Rspack 的 Web 构建工具。
随着前端生态的发展,社区中出现了多样化的编译工具和插件。对于大部分开发者来说,构建一个 Web 应用所需的配置和依赖已变得十分复杂。在追求最佳实践的过程中,开发者需要付出的成本也在不断上升。
为了减少构建的复杂性,降低上手门槛,我们基于 Modern.js 在 Web 应用构建方面的实践经验,抽象其中的构建能力,打造出 Modern.js Builder 这个构建工具。
近年来,前端工具链的发展趋势是使用 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 的前端框架有:
Builder 支持 webpack 和 Rspack 两种打包工具,你可以在成熟的 Webpack 和更快的 Rspack 之间进行切换。
Rspack 是一个基于 Rust 的高性能 Web 构建工具,具备与 webpack 生态系统的互操作性,可以被 webpack 项目低成本集成,并提供更好的构建性能。
相较于 webpack,Rspack 的构建性能有明显提升,除了 Rust 带来的语言优势,这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证,Rspack 可以带来 5 ~ 10 倍编译性能的提升。
默认情况下,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 也支持自定义插件,因此框架开发者可以开发自定义的插件,实现定制化的构建需求。
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 目录下查看这些包的源代码。
你可能想要: