build
Usage: modern build [options]
build application
Options:
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
-h, --help 显示命令帮助
--analyze 分析构建产物体积,查看各个模块打包后的大小
modern build
命令默认会在 /dist
目录下构建出可用于生产环境的产物。
可以通过修改配置 output.path
指定产物的输出目录。
分析构建产物体积
执行 npx modern build --analyze
命令,可以在打包生产环境代码的同时,产出一个分析构建产物体积的 HTML 文件:
Bundle Analyzer saved report to /example/dist/report.html
File sizes after production build:
122.35 KB dist/static/js/885.1d4fbe5a.js
2.3 KB dist/static/js/main.4b8e8d64.js
761 B dist/static/js/runtime-main.edb7cf35.js
645 B dist/static/css/main.0dd3ecc1.css
手动在浏览器中打开上述 HTML 文件,可以看到打包产物的瓦片图,并进行包体积分析和优化:
该功能基于 webpack-bundle-analyzer 实现。
命令行参数
提示
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」模式
build electron-web
Usage: modern build electron-web [options]
build electron renderer with node environment
Options:
-h, --help display help for command
窗口中开启 Node 时构建渲染进程。
示例
{
"scripts": {
"build:render": "modern build electron-web",
}
}
在 Electron 中,项目下执行:build:render
命令,构建渲染进程(窗口中启用 Node)。
补充信息
关于窗口中【开启 Node】。
build electron-main
Usage: modern build electron-main [options]
build electron main process
Options:
-d, --development build with NODE_ENV=development
-m, --main <main> specify the entrance folder path of main process, such as: electron/
-i, --ignore <ignore> ignore folder or file
-e, --extra <extra...> specify extra folders to compile
-en, --enableNode enable use node in electron render
-h, --help display help for command
构建主进程。
示例 - 普通构建
{
"scripts": {
"build:main": "modern build electron-main",
}
}
在 Electron 中,项目下执行:build:main
命令,构建主进程。
示例 - 指定主进程目录
打包的时候,我们也可以通过 --main
指定我们的主进程目录。
{
"scripts": {
"build:main": "modern build electron-main --main ./electron",
}
}
示例 - 指定其他编译目录
打包的时候,我们在主进程里引用了其他目录,则可以如下进行构建:
比如: 主进程使用了 shared 目录。
{
"scripts": {
"build:main": "modern build electron-main --extra ./shared",
}
}
tip
由于主进程目前采用的是 babel 构建,维持主进程目录结构。因此,在构建起他目录的时候,需要通过 --extra 进行额外的指定。
详细示例:主进程构建
示例 - 忽略不需要编译的文件
我们可以通过指定 “--ignore” 忽略不需要编译的文件。
{
"scripts": {
"build:main": "modern build electron-main --ignore electron/xx.ts,electron/xxx.ts",
}
}
补充信息
"--ignore" 也可以填写文件夹,多个可以逗号隔开。
build electron-app
Usage: modern build electron-app [options]
build electron app
Options:
-h, --help display help for command
打包应用。
示例
{
"scripts": {
"build:app": "modern build electron-app",
}
}
在构建完成主进程、渲染进程之后,执行此命令,打包成可执行文件与安装程序。
补充信息
- 其中,可在执行打包时传入环境变量
PLATFORM
指定构建的操作系统。 PLATFORM
可为mac
、win32
、win64
、linux
、linuxArm64
其中一个。
build electron
Usage: modern build electron [options]
build electron all: render process、main process and electron app
Options:
-d, --development build with NODE_ENV=development
-m, --main <main> specify the entrance folder path of main process, such as: electron/
-i, --ignore <ignore> ignore folder or file
-e, --extra <extra...> specify extra folders to compile
-en, --enableNode enable use node in electron render
-h, --help display help for command
一行命令构建:渲染进程、主进程、应用。
```json
{
"scripts": {
"build:all": "modern build electron",
}
}
通过上述命令,会顺序构建渲染进程、主进程,打包应用。
补充信息
- 其中,可在执行打包时传入环境变量
PLATFORM
指定构建的操作系统。 PLATFORM
可为mac
、win32
、win64
、linux
、linuxArm64
其中一个。
示例 -【DEBUG 模式】构建
有时候我们期望打一些 DEBUG 包,其中的 js 没有被混淆压缩,我们可以这样:
{
"scripts": {
"build:all": "modern build electron --development",
}
}
示例-指定主进程目录
打包的时候,我们也可以指定我们的主进程目录。
{
"scripts": {
"build:all": "modern build electron --main ./electron",
}
}
示例 - 启用 Node 构建渲染进程
{
"scripts": {
"build:all": "modern build electron --enableNode",
}
}
示例-忽略不需要编译的文件
我们可以通过指定 “--ignore” 忽略不需要编译的文件。
{
"scripts": {
"build:all": "modern build electron --ignore electron/xx.ts,electron/xxx.ts",
}
}
补充信息
"--ignore" 也可以填写文件夹,多个可以逗号隔开。