命令

Modern.js 内置了一些命令，可以帮助你快速启动开发服务器、构建生产环境代码等。

通过本章节，你可以了解到 Modern.js 内置的命令有哪些，以及如何使用这些命令。

modern dev

modern dev 命令用于启动一个本地开发服务器，对源代码进行开发环境编译。

Usage: modern dev [options]

Options:
  -e --entry <entry>    指定入口，只编译特定的页面
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -h, --help            显示命令帮助
  --web-only            仅启动 Web 服务
  --api-only            仅启动 API 接口服务

运行 modern dev 后，Modern.js 会监听源文件变化并进行模块热更新。

$ modern dev

info    Starting dev server...

  > Local:    http://localhost:8080/
  > Network:  http://192.168.0.1:8080/

编译部分页面

在多页面（MPA）项目中，可以添加 --entry 参数来指定编译其中的一个或多个页面。这样可以只编译项目中的部分代码，从而提升 dev 启动速度。

比如执行 modern dev --entry，在命令行界面中会展示入口选择框：

$ modern dev --entry

? 请选择需要构建的入口
❯ ◯ foo
  ◯ bar
  ◯ baz

比如选择 foo 入口，那么只有 foo 入口相关的代码会进行编译，其他页面的代码将不会参与构建。

通过参数指定页面

你也可以在 --entry 后面通过参数来指定页面名称，多个页面的名称使用逗号分隔。

# 编译 foo 页面
modern dev --entry foo

# 编译 foo 和 bar 页面
modern dev --entry foo,bar

modern start

modern start 是 modern dev 命令的别名，两者的功能和用法完全一致。

modern build

modern build 命令默认会在 dist/ 目录下构建出可用于生产环境的产物。你可以通过修改配置 output.distPath 指定产物的输出目录。

Usage: modern build [options]

Options:
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -h, --help  显示命令帮助
  -w --watch  开启 watch 模式, 监听文件变更并重新构建

modern serve

modern serve 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 build 命令构建出对应产物。

Usage: modern serve [options]

Options:
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -h, --help            显示命令帮助
  --api-only            仅启动 API 接口服务

默认情况下，应用将会在 localhost:8080 启动，可以通过 server.port 修改 Server 端口号：

export default defineConfig({
  server: {
    port: 8081,
  },
});

Info

modern new 和 modern upgrade 命令已在 Modern.js 3.0 中移除，替代方式见升级指南。

modern inspect

modern inspect 命令用于查看项目的 Modern.js 配置、Rsbuild 配置以及 Rspack 配置。

Usage: modern inspect [options]

Options:
  --env <env>           查看指定环境下的配置 (default: "development")
  --output <output>     指定在 dist 目录下输出的路径 (default: "./")
  --verbose             在结果中展示函数的完整内容
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -h, --help            显示命令帮助

在项目根目录下执行命令 npx modern inspect 后，会在项目的 dist 目录生成以下文件：

modern.js.config.mjs: 表示当前使用的 Modern.js 配置。
rsbuild.config.mjs: 表示在构建时使用的 Rsbuild 配置。
rspack.config.web.mjs: 表示在构建时使用的 Rspack 配置。

➜ npx modern inspect

Inspect config succeed, open following files to view the content:

  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
  - Modern.js Config: /root/my-project/dist/modern.js.config.mjs

指定环境

默认情况下，inspect 命令会输出开发环境的配置，你可以添加 --env production 选项来输出生产环境的配置：

modern inspect --env production

完整内容

默认情况下，inspect 命令会省略配置对象中的函数内容，你可以添加 --verbose 选项来输出函数的完整内容：

modern inspect --verbose

SSR 构建配置

如果项目开启了 SSR 能力，则在 dist 目录会另外生成一份 rspack.config.node.mjs 文件，对应 SSR 构建时的 Rspack 配置。

➜ npx modern inspect

Inspect config succeed, open following files to view the content:

  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
  - Rspack Config (node): /root/my-project/dist/rspack.config.node.mjs
  - Modern.js Config: /root/my-project/dist/modern.js.config.mjs

modern deploy

modern deploy 命令，用于生成部署平台需要的产物。

Usage: modern deploy [options]

Options:
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -s --skip-build       跳过构建阶段
  -h, --help            显示命令帮助

详细内容可以参考部署应用。

#命令

#modern dev

#编译部分页面

#通过参数指定页面

#modern start

#modern build

#modern serve

#modern inspect

#指定环境

#完整内容

#SSR 构建配置

#modern deploy

命令