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