构建工具

Modern.js 的构建能力由 Modern.js Builder 提供。

Modern.js Builder 是 Modern.js 体系的核心组件之一,它是一个基于 Rspack 的 Web 构建工具,可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具,默认情况下使用最成熟的 webpack 进行打包。

构建架构

从构建的角度看,Modern.js 分为三层架构,从上到下依次是:

  • 上层研发框架:Modern.js。
  • 通用构建工具:Modern.js Builder。
  • 底层打包工具:webpack 和 Rspack。

构建文档

由于 Modern.js Builder 是一个可独立使用的模块,我们为它提供了单独的文档,文档地址为:modernjs.dev/builder

在该文档中,你可以了解到 Modern.js Builder 的详细介绍,同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时,建议你优先阅读 Modern.js Builder 文档来解决。

构建配置

Modern.js 的配置继承自 Modern.js Builder,因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。

以 Modern.js Builder 的 html.title 配置项为例,你可以直接在 modern.config.ts 文件中使用该配置项,它会被自动传递给 Modern.js Builder。

modern.config.js
export default defineConfig({
  html: {
    title: 'example',
  },
});

关于构建配置的详细说明,请参考 「Modern.js Builder - Builder 配置」

构建能力

Modern.js Builder 提供了丰富的构建能力,包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。

我们推荐你阅读 「Modern.js Builder - 功能导航」 来了解 Modern.js Builder 提供的所有构建能力。