跳转到主文档
应用工程
模块工程
Monorepo工程
项目生成器

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",
}
}