跳转到主文档

dev

Usage: modern dev [options]

本地开发命令

Options:
  -e --entry <entry>    指定入口，编译特定的页面
  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
  -h, --help            显示命令帮助
  --analyze             分析构建产物体积，查看各个模块打包后的大小
  --api-only            仅启动 API 接口服务

modern dev 命令启动一个开发服务器，同时监听源文件变化，默认支持 React Fast Refresh：

App running at:

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

pnpm v6 和 pnpm v7 版本在执行命令时使用姿势不完全一致，需要注意以下事项：

pnpm v7：

在使用 pnpm 调用 package.json 中的命令时，如果需要传递参数至 pnpm，需要将参数放到命令前。

例如使用 pnpm --filter 参数执行 prepare 命令：

pnpm run --filter "./packages/**" prepare

如果需要传递参数至命令，需要将参数放到命令后。

例如，在如下 package.json 配置中：

{
  "scripts": {
    "command": "modern command"
  }
}

执行 command 命令时携带参数方式为：

pnpm run command --options

pnpm v6:

在如下 package.json 配置中：

{
  "scripts": {
    "command": "modern command"
  }
}

当需要执行 modern command --option：

使用 pnpm 时，需要执行 pnpm run command -- --option。

这是因为 pnpm 对于命令参数的处理与 Yarn 并不相同，但是与 npm 类似：在不加 -- 字符串的时候，传递的是 pnpm 的参数；在使用 -- 字符串的时候，传递的是执行脚本的参数。

在上述例子里参数 --option 传递给了 modern command。如果执行 pnpm run command --option，则参数 --option 将传递给 pnpm。

总结来说：

在使用 pnpm v7 时，如果传递参数给 pnpm，需要将参数放置到命令前

在使用 pnpm v6 时，如果传递的参数给 pnpm，不需要加 --；如果传递的参数是给脚本使用，需要增加 -- 字符串。

Electron 应用开发​

Modern.js 提供了基于 Electron 的桌面应用开发模式。

可以在项目创建时选择：

? 是否需要支持以下类型应用 Electron

也可在项目执行 new 命令启用「Electron」模式：

$ npx modern new
? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用「Electron」模式

dev electron-web​

窗口中开启 Node 启动渲染进程。

Usage: modern dev electron-web [options]

Options:
  -h, --help  display help for command

示例​

{
  "scripts": {
    "dev:render": "modern dev electron-web",
  }
}

在 Electron 中，项目下执行：dev:render 命令，启动渲染进程（窗口中开启 Node）。

补充信息

关于窗口中【开启 Node】。

dev electron-main​

启动主进程。

Usage: modern dev electron-main [options]

Options:
  -e, --entry <entry>
  -h, --help           display help for command

示例 - 普通启动主进程​

{
  "scripts": {
    "dev:main": "modern dev electron-main",
  }
}

在 Electron 中，项目下执行：dev:main 命令，启动主进程。

示例 - 指定主进程入口文件地址​

{
  "scripts": {
    "dev:main": "modern dev electron-main --entry xx/xx.ts",
  }
}

dev electron​

先启动渲染进程，再启动主进程。

Usage: modern dev electron [options]

Options:
  -en, --enableNode    enable use node in electron render
  -e, --entry <entry>  specify the entry path of main process such as: xx/xx.ts(js)
  -h, --help           display help for command

示例 - 普通启动​

{
  "scripts": {
    "dev:electron": "modern dev electron",
  }
}

在 Electron 中，项目下执行：dev:electron 命令，会先启动渲染进程，再启动主进程。

示例 - 窗口中开启 Node​

如果期望启动渲染进程的时候，在窗口中开启 Node，可以这样：

{
  "scripts": {
    "dev:electron": "modern dev electron --enableNode",
  }
}

示例 - 主进程启动时指定入口文件​

{
  "scripts": {
    "dev:electron": "modern dev electron --entry xx/xx.ts",
  }
}