docs(builder): add builder CLI usage guide (#4081)

* docs(builder): add builder CLI usage guide

* docs: fix link

* docs: update

packages/document/builder-doc/docs/en/guide/basic/builder-cli.mdx

@@ -0,0 +1,114 @@
+# Use Builder CLI
+
+Modern.js Builder provides a lightweight CLI tool that includes basic commands such as `dev` and `build`. It is primarily used for building non-React projects.
+
+- For React projects, we recommend using the Modern.js framework directly. Please refer to [Modern.js - Quick Start](https://modernjs.dev/en/guides/get-started/quick-start.html) for more information.
+- For non-React projects, such as developing a Vue project, you can use the Builder CLI tool to build your project.
+
+## Install
+
+You need to install two packages:
+
+- `@modern-js/builder-cli` is the CLI tool for Builder, providing basic CLI commands and automatically loading the installed Provider in the current project.
+- `@modern-js/builder-webpack-provider` or `@modern-js/builder-rspack-provider`, they are Providers for Builder, offering build capabilities based on webpack or Rspack.
+
+```bash
+# Using webpack for bundling
+pnpm add @modern-js/builder-cli @modern-js/builder-webpack-provider -D
+
+# Using Rspack for bundling
+pnpm add @modern-js/builder-cli @modern-js/builder-rspack-provider -D
+```
+
+## Commands
+
+Builder CLI provides the following commands to help you quickly start a development server, build production-ready code, and more.
+
+### builder dev
+
+The `builder dev` command is used to start a local development server and compile the source code in the development environment.
+
+```bash
+Usage: builder dev [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+### builder build
+
+The `builder build` command will build the outputs for production in the `dist/` directory by default.
+
+```bash
+Usage: builder build [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+### builder serve
+
+The `builder serve` command is used to preview the production build outputs locally. Note that you need to execute the `builder build` command beforehand to generate the corresponding outputs.
+
+```bash
+Usage: builder serve [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+## Configuration
+
+Builder CLI will read the `builder.config.ts` configuration file located in the root directory of your project by default. You can use [all the configuration options](/api/index) provided by Builder in the configuration file.
+
+```ts title="builder.config.ts"
+import { defineConfig } from '@modern-js/builder-cli';
+
+export default defineConfig({
+  output: {
+    disableTsChecker: true,
+  },
+});
+```
+
+When you use Rspack as the bundler, there are some differences in configuration types between webpack and Rspack. Therefore, you need to specify the `'rspack'` generic for `defineConfig`:
+
+```diff title="builder.config.ts"
+- export default defineConfig({
++ export default defineConfig<'rspack'>({
+  // ...
+});
+```
+
+## Build Entry
+
+By default, Builder CLI uses `src/index.(js|ts|jsx|tsx)` as the build entry. You can modify the build entry using the `source.entries` configuration option.
+
+- **Type:**
+
+```ts
+type Entries = Record<string, string>;
+```
+
+- **Default:**
+
+```ts
+const defaultEntry = {
+  index: 'src/index.(js|ts|jsx|tsx)',
+};
+```
+
+- **Example:**
+
+```ts title="builder.config.ts"
+import { defineConfig } from '@modern-js/builder-cli';
+
+export default defineConfig({
+  source: {
+    entries: {
+      foo: './src/pages/foo/index.ts',
+      bar: './src/pages/bar/index.ts',
+    },
+  },
+});
+```

packages/document/builder-doc/docs/en/guide/quick-start.mdx

@@ -20,6 +20,14 @@ Please refer to [Modern.js - Introduction](https://modernjs.dev/en/guides/get-st
 Modern.js framework documentation and Modern.js Builder documentation are deployed under two separate sites. If you encounter any build-related problems while using the Modern.js framework, you can always refer to the documentation of Modern.js Builder to find solutions.
 :::
 
+## Usse the Builder CLI Tool
+
+Modern.js Builder provides a lightweight CLI tool that includes basic commands such as `dev` and `build`. It is primarily used for building non-React projects.
+
+If your project is not based on the React, for example, if you are developing a Vue project, you can use the Builder CLI tool to build your project.
+
+Please refer to [Use Builder CLI](/guide/basic/builder-cli) for more information on how to use it.
+
 ## Use Builder in a Front-end Framework
 
 If you are developing a front-end framework, you can use Builder by following these steps:
@@ -28,21 +36,27 @@ If you are developing a front-end framework, you can use Builder by following th
 
 You need to install two packages:
 
-- `@modern-js/builder` is the core package of Builder and exports the core API.
-- `@modern-js/builder-webpack-provider` is a provider for Builder, providing webpack-based building capabilities.
+- `@modern-js/builder`: This is the core package of Builder, which exports the core API of Builder.
+- `@modern-js/builder-webpack-provider` or `@modern-js/builder-rspack-provider`: These are the Providers for Builder, which provide the building capabilities based on webpack or Rspack.
 
 ```bash
+# Using webpack for bundling
 pnpm add @modern-js/builder @modern-js/builder-webpack-provider -D
+
+# Using Rspack for bundling
+pnpm add @modern-js/builder @modern-js/builder-rspack-provider -D
 ```
 
-> When upgrading the version, please make sure that Builder and Provider you are installing are the same version.
+> When performing a version upgrade, please ensure that the Builder and Provider packages you install are of the same version.
 
 ### 2. Create Builder Instance
 
 There are two steps to creating a Builder instance:
 
 First you need to initialize the Builder Provider and pass in the `builderConfig` config object. Builder provides a lot of configs that allow you to customize the build behavior. At this point, you don't need to know the specific content of the config, just pass in an empty object. You can find all available configs in [API - config](/en/api/#config).
 
+- Initialize the Rspack Provider:
+
 ```ts
 import { createBuilder } from '@modern-js/builder';
 import { builderWebpackProvider } from '@modern-js/builder-webpack-provider';
@@ -54,7 +68,20 @@ const provider = builderWebpackProvider({
 });
 ```
 
-After getting the provider object, you can call the `createBuilder` method to create a Builder instance object:
+- Initialize the Rspack Provider：
+
+```ts
+import { createBuilder } from '@modern-js/builder';
+import { builderRspackProvider } from '@modern-js/builder-rspack-provider';
+
+const provider = builderRspackProvider({
+  builderConfig: {
+    // some configs
+  },
+});
+```
+
+After getting the provider instance, you can call the `createBuilder` method to create a Builder instance object:
 
 ```ts
 const builder = await createBuilder(provider, {

packages/document/builder-doc/docs/zh/guide/basic/builder-cli.mdx

@@ -0,0 +1,114 @@
+# 使用 Builder CLI
+
+Modern.js Builder 提供了一个轻量的 CLI 工具，包含 dev、build 等基础命令，它主要用于构建非 React 项目。
+
+- 对于 React 项目，我们建议直接使用 Modern.js 框架，参考 [Modern.js - 快速上手](https://modernjs.dev/guides/get-started/quick-start.html)。
+- 对于非 React 项目，比如开发一个 Vue 项目，那么你可以使用 Builder CLI 工具来构建你的项目。
+
+## 安装
+
+你需要安装两个包，其中：
+
+- `@modern-js/builder-cli` 为 Builder 的 CLI 工具，提供基础的 CLI 命令，并会自动加载当前项目中安装的 Provider。
+- `@modern-js/builder-webpack-provider` 或 `@modern-js/builder-rspack-provider`，它们是 Builder 的 Provider，提供基于 webpack 或 Rspack 的构建能力。
+
+```bash
+# 使用 webpack 打包
+pnpm add @modern-js/builder-cli @modern-js/builder-webpack-provider -D
+
+# 使用 Rspack 打包
+pnpm add @modern-js/builder-cli @modern-js/builder-rspack-provider -D
+```
+
+## 命令
+
+Builder CLI 提供了以下命令，可以帮助你快速启动开发服务器、构建生产环境代码等。
+
+### builder dev
+
+`builder dev` 命令用于启动一个本地开发服务器，对源代码进行开发环境编译。
+
+```bash
+Usage: edenx dev [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+### builder build
+
+`builder build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。
+
+```bash
+Usage: builder build [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+### builder serve
+
+`builder serve` 命令用于在本地预览生产环境构建的产物, 注意你需要提前执行 `builder build` 命令构建出对应产物。
+
+```bash
+Usage: builder serve [options]
+
+Options:
+  -h, --help            display help for command
+```
+
+## 配置
+
+Builder CLI 默认会读取项目根目录下的 `builder.config.ts` 配置文件，你可以在配置文件中使用 Builder 提供的[所有配置项](/api/index)。
+
+```ts title="builder.config.ts"
+import { defineConfig } from '@modern-js/builder-cli';
+
+export default defineConfig({
+  output: {
+    disableTsChecker: true,
+  },
+});
+```
+
+当你使用 Rspack 作为打包工具时，由于 webpack 和 Rspack 的配置类型存在一些差异，需要为 defineConfig 指定 `<'rspack'>` 泛型：
+
+```diff title="builder.config.ts"
+- export default defineConfig({
++ export default defineConfig<'rspack'>({
+  // ...
+});
+```
+
+## 构建入口
+
+Builder CLI 默认会使用 `src/index.(js|ts|jsx|tsx)` 作为构建入口，你可以使用 `source.entries` 配置项来修改构建入口。
+
+- **类型：**
+
+```ts
+type Entries = Record<string, string>;
+```
+
+- **默认值：**
+
+```ts
+const defaultEntry = {
+  index: 'src/index.(js|ts|jsx|tsx)',
+};
+```
+
+- **示例：**
+
+```ts title="builder.config.ts"
+import { defineConfig } from '@modern-js/builder-cli';
+
+export default defineConfig({
+  source: {
+    entries: {
+      foo: './src/pages/foo/index.ts',
+      bar: './src/pages/bar/index.ts',
+    },
+  },
+});
+```

packages/document/builder-doc/docs/zh/guide/quick-start.mdx

@@ -20,6 +20,14 @@ npx @modern-js/create@latest my-app
 Modern.js 框架文档和 Modern.js Builder 文档部署在两个独立的站点下。如果你在使用 Modern.js 框架的过程中遇到任何构建相关的问题，你可以随时查阅 Modern.js Builder 的文档来寻找相应的解决方案。
 :::
 
+## 使用 Builder CLI 工具
+
+Modern.js Builder 提供了一个轻量的 CLI 工具，包含 dev、build 等基础命令，它主要用于构建非 React 项目。
+
+如果你的项目不是基于 React 的，比如开发一个 Vue 项目，那么你可以使用 Builder CLI 工具来构建你的项目。
+
+请参考 [使用 Builder CLI](/guide/basic/builder-cli) 来了解相关用法。
+
 ## 在前端框架中接入
 
 如果你正在开发一个前端框架，可以通过下面的步骤来接入 Builder:
@@ -29,10 +37,14 @@ Modern.js 框架文档和 Modern.js Builder 文档部署在两个独立的站点
 你需要安装两个包，其中：
 
 - `@modern-js/builder` 为 Builder 的核心包，导出了 Builder 的核心 API。
-- `@modern-js/builder-webpack-provider` 为 Builder 的一个 Provider，提供了基于 webpack 的构建能力。
+- `@modern-js/builder-webpack-provider` 或 `@modern-js/builder-rspack-provider`，它们是 Builder 的 Provider，提供基于 webpack 或 Rspack 的构建能力。
 
 ```bash
+# 使用 webpack 打包
 pnpm add @modern-js/builder @modern-js/builder-webpack-provider -D
+
+# 使用 Rspack 打包
+pnpm add @modern-js/builder @modern-js/builder-rspack-provider -D
 ```
 
 > 在进行版本升级时，请确保你安装的 builder 和 provider 为同一个版本。
@@ -43,6 +55,8 @@ pnpm add @modern-js/builder @modern-js/builder-webpack-provider -D
 
 首先你需要初始化 Builder Provider，并传入 `builderConfig` 配置对象。Builder 提供了丰富的配置项，允许你对构建行为进行灵活定制。此时你还不需要了解配置项的具体内容，传入一个空对象即可。你可以在 [API - 配置](/api/#配置) 中找到所有可用的配置项。
 
+- 初始化 webpack Provider：
+
 ```ts
 import { createBuilder } from '@modern-js/builder';
 import { builderWebpackProvider } from '@modern-js/builder-webpack-provider';
@@ -54,7 +68,20 @@ const provider = builderWebpackProvider({
 });
 ```
 
-拿到 provider 对象后，你可以调用 `createBuilder` 方法来创建一个 Builder 实例对象：
+- 初始化 Rspack Provider：
+
+```ts
+import { createBuilder } from '@modern-js/builder';
+import { builderRspackProvider } from '@modern-js/builder-rspack-provider';
+
+const provider = builderRspackProvider({
+  builderConfig: {
+    // some configs
+  },
+});
+```
+
+拿到 provider 实例后，你可以调用 `createBuilder` 方法来创建一个 Builder 实例对象：
 
 ```ts
 const builder = await createBuilder(provider, {

packages/document/builder-doc/modern.config.ts

@@ -61,6 +61,7 @@ function getSidebar(lang: 'zh' | 'en'): Sidebar {
           getLink('/guide/basic/html-template'),
           getLink('/guide/basic/css-modules'),
           getLink('/guide/basic/typescript'),
+          getLink('/guide/basic/builder-cli'),
         ],
       },
       {

tests/e2e/builder/cases/builder-cli/builder-cli-webpack/builder.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from '@modern-js/builder-cli';
 
-export default defineConfig<'rspack'>({
+export default defineConfig({
   output: {
     disableTsChecker: true,
   },