Modern.js Builder CLI 工具使用指南

前言

Modern.js Builder 是一个现代化的前端构建工具，它提供了 Builder CLI 这一轻量级命令行工具，专门用于构建非 React 项目（如 Vue 项目）。本文将详细介绍 Builder CLI 的核心功能和使用方法。

核心概念

Builder CLI 是 Modern.js 生态中的构建工具链入口，它具备以下特点：

1. 轻量级：只包含最基础的构建命令
2. 可扩展：通过 Provider 机制支持不同的底层构建引擎
3. 配置驱动：提供丰富的配置选项

安装与初始化

安装依赖

Builder CLI 需要安装两个核心包：

npm install @modern-js/builder-cli @modern-js/builder-rspack-provider -D

或者使用 yarn：

yarn add @modern-js/builder-cli @modern-js/builder-rspack-provider -D

构建引擎选择

Builder 支持两种底层构建引擎：

1. Rspack（推荐）：新一代基于 Rust 的高性能构建工具

   npm install @modern-js/builder-rspack-provider -D
   

2. Webpack：传统但成熟的构建工具

   npm install @modern-js/builder-webpack-provider -D
   

核心命令详解

开发模式

builder dev

启动本地开发服务器，提供：

• 热模块替换(HMR)
• 实时错误反馈
• 开发环境优化

生产构建

builder build

执行生产环境构建，特点包括：

• 代码压缩和优化
• 资源指纹处理
• 自动生成生产环境配置
• 输出到 dist 目录

本地预览

builder serve

预览生产构建结果，需先执行 builder build

配置系统

Builder CLI 默认会读取项目根目录下的 builder.config.ts 配置文件。

基础配置示例

import { defineConfig } from '@modern-js/builder-cli';

export default defineConfig({
  output: {
    disableTsChecker: true,  // 禁用 TypeScript 类型检查
  },
});

Rspack 特殊配置

使用 Rspack 时需要指定泛型类型：

import { defineConfig } from '@modern-js/builder-cli';

export default defineConfig<'rspack'>({
  // Rspack 特有配置
});

构建入口配置

默认入口

Builder 默认使用 src/index.(js|ts|jsx|tsx) 作为构建入口。

多入口配置

import { defineConfig } from '@modern-js/builder-cli';

export default defineConfig({
  source: {
    entries: {
      main: './src/main.ts',
      admin: './src/admin/index.ts',
      user: './src/user/entry.js'
    }
  }
});

插件系统

Builder 支持通过插件扩展功能：

Vue 项目插件示例

import { defineConfig } from '@modern-js/builder-cli';
import { builderPluginVue } from '@modern-js/builder-plugin-vue';

export default defineConfig({
  builderPlugins: [builderPluginVue()],
});

最佳实践

1. 项目结构建议：

   project/
   ├── src/
   │   ├── index.ts       # 主入口
   │   └── assets/        # 静态资源
   ├── builder.config.ts  # 构建配置
   └── package.json
   

2. 性能优化：

   • 生产构建时启用代码分割
   • 合理配置缓存策略
   • 按需引入 polyfill

3. 调试技巧：

   • 使用 --debug 参数查看详细构建日志
   • 通过 BUILD_ANALYZE=1 环境变量启用构建分析

总结

Modern.js Builder CLI 为非 React 项目提供了简单高效的构建解决方案。通过本文的介绍，您应该已经掌握了：

1. 如何安装和初始化 Builder CLI
2. 核心命令的使用方法
3. 配置系统的运作机制
4. 插件系统的扩展方式

对于更复杂的项目需求，建议参考官方文档深入了解高级配置选项。