For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/apis/app/commands.md.
  • 简体中文
  • 命令

    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 new

    modern new 命令用于在已有项目中添加项目元素。

    比如添加应用入口、启用一些可选功能如 BFF、微前端开发模式等。

    Usage: modern new [options]
    
    Options:
      --config-file <configFile>  指定配置文件路径,可以为相对路径或绝对路径
      --lang <lang>          设置 new 命令执行语言(zh 或者 en)
      -d, --debug            开启 Debug 模式,打印调试日志信息 (default: false)
      -c, --config <config>  生成器运行默认配置(JSON 字符串)
      --dist-tag <tag>       生成器使用特殊的 npm Tag 版本
      --registry             生成器运行过程中定制 npm Registry
      -h, --help             显示命令帮助

    添加入口

    在 Modern.js 工程中,执行 new 命令添加入口的步骤如下:

    $ npx modern new
    ? 请选择你想要的操作 创建工程元素
    ? 请选择创建元素类型 新建「应用入口」
    ? 请填写入口名称 entry

    启用可选功能

    在 Modern.js 工程中,执行 new 命令启用可选能力的步骤如下:

    $ npx modern new
    ? 请选择你想要的操作 启用可选功能
    ? 请选择功能名称 (Use arrow keys)
    ❯ 启用「BFF」功能
      启用「微前端」模式
    Tip

    --config 参数对应参数值需要使用 JSON 字符串。

    pnpm 暂不支持使用 JSON 字符串作为参数值,可使用 npm new 开启相关功能。【相关 Issue】

    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,
      },
    });

    modern upgrade

    在项目根目录下执行命令 npx modern upgrade,会默认将当前执行命令项目的 package.json 中的 Modern.js 相关依赖更新至最新版本。

    Usage: modern upgrade [options]
    
    Options:
      -c --config <config>  指定配置文件路径,可以为相对路径或绝对路径
      --registry <registry>  定制 npm registry (default: "")
      -d,--debug             开启 Debug 模式,打印调试日志信息 (default: false)
      --cwd <cwd>            项目路径 (default: "")
      -h, --help             display help for command

    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            显示命令帮助

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