Node.js on Liangweidong's blog

Linux 开发环境搭建：JDK 8 / Maven 3.9 / NVM 与 Node 多版本管理

Fri, 30 Dec 2022 00:00:00 +0800

一、为什么是 2022 年这一份

2022 年这个时间点，Linux 后端/前端开发环境进入"标准化"阶段：

JDK 8 仍是企业主流（Spring Boot 2.x、Solr、大数据生态全靠它）
JDK 17 在 2021-09 发布后逐步成新项目首选
Maven 3.9（2023-01 发布）已经稳定，3.8 系列成为过去
NVM 0.39.x（2021-2022 系列）稳定，Node 14/16/18 三版本并行
npm 镜像 经历 npm.taobao.org → npmmirror.com 的迁移（2022-05）
systemd 全面接管 Java 服务启动

这一篇覆盖 JDK 8 / Maven / NVM 三大主力工具的安装、镜像、版本管理、与 systemd 集成——后端/前端开发者的"装机手册"。

阅读建议：本文是"工具栈"性质——按"装什么 → 配什么 → 用什么"组织。

二、JDK 8 安装（2022 仍主流）

2.1 下载与解压

1
2
3
4
5
6
7


# 下载 jdk-8u371-linux-x64.tar.gz
cd /usr/local
mkdir jdk
cd jdk
tar -xf jdk-8u371-linux-x64.tar.gz

# 解压到 /usr/local/jdk/jdk1.8.0_371

关于 8u371：Oracle JDK 8u371 是 2023-04 发布的。如果坚持 2022 时间线，可以选 8u341（2022-04）或 8u351（2022-10）。

2.2 环境变量

1

vim /etc/profile

1
2
3


export JAVA_HOME=/usr/local/jdk/jdk1.8.0_371
export CLASSPATH=$JAVA_HOME/bin:$JAVA_HOME/lib:$JAVA_HOME/jre/lib
export PATH=.:$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH

1

source /etc/profile

2.3 验证

1
2
3
4


java -version
# java version "1.8.0_371"
# Java(TM) SE Runtime Environment (build 1.8.0_371-b11)
# Java HotSpot(TM) 64-Bit Server VM (build 25.371-b11, mixed mode)

三、Maven 3.9 安装

3.1 下载与解压

1
2
3
4
5
6
7
8


cd /usr/local/maven

# 3.9.2（2023-01 发布的 3.9.2 仍是很多 CI 的稳定选择）
wget https://archive.apache.org/dist/maven/maven-3/3.9.2/binaries/apache-maven-3.9.2-bin.tar.gz
tar -xf apache-maven-3.9.2-bin.tar.gz

# 改名
mv apache-maven-3.9.2 apache-maven-3.9.2

3.2 更换 settings.xml

把默认的 conf/settings.xml 替换成公司/个人定制的（国内镜像、代理、私服等）。

1
2
3
4
5
6


# 备份
cp /usr/local/maven/apache-maven-3.9.2/conf/settings.xml \
 /usr/local/maven/apache-maven-3.9.2/conf/settings.xml.bak

# 替换
vim /usr/local/maven/apache-maven-3.9.2/conf/settings.xml

3.3 环境变量

1

vim /etc/profile

1
2


export MAVEN_HOME=/usr/local/maven/apache-maven-3.9.2
export PATH=$MAVEN_HOME/bin:$PATH

1

source /etc/profile

3.4 验证

1
2
3
4
5
6


mvn -v
# Apache Maven 3.9.2 (21122926829f1ead511c958d89bd2f672198ae9f)
# Maven home: /usr/local/maven/apache-maven-3.9.2
# Java version: 1.8.0_371, vendor: Oracle Corporation, runtime: /usr/local/jdk/jdk1.8.0_371/jre
# Default locale: en_US, platform encoding: UTF-8
# OS name: "linux", version: "5.19.0-46-generic", arch: "amd64", family: "linux"

四、NVM 装 Node 多版本

4.1 下载 NVM 0.39.3

1

wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.3.tar.gz

4.2 安装

1
2
3
4


cd ~
mkdir .nvm
tar -zxvf v0.39.3.tar.gz --strip-components 1 -C /root/.nvm
rm -rf v0.39.3.tar.gz

4.3 环境变量

1

vim /etc/profile

1
2
3
4


export NVM_BIN="/root/.nvm/versions/node"
export NVM_DIR="/root/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

1
2
3
4


source /etc/profile
source ~/.zshrc

nvm --version

4.4 设置镜像

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# Windows
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 2023-07-19 之后：原 taobao.org 改为 npmmirror.com
nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror https://npmmirror.com/mirrors/npm/

# Linux 改环境变量
vim /etc/profile
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/

# 测试
curl $NVM_NODEJS_ORG_MIRROR

关于 npm 镜像迁移：2022-05-31 之后 npm.taobao.org 域名失效，全部迁移到 npmmirror.com。新项目必须用新域名。

4.5 装 Node 14

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# 查可用版本
nvm ls-remote

# 装 Node 14.21.3
nvm install v14.21.3

# 验证
whereis node
# node: /root/.nvm/versions/node/v14.21.3/bin/node

node -v
# v14.21.3

npm -v
# 6.14.18

4.6 多版本共存

1
2
3
4
5
6
7
8
9


# 装第二个版本
nvm install v14.17.3

# 切换
nvm use v14.21.3

# 把 nvm 整体迁移到数据盘
mv /root/.nvm /data/jenkins/
# 改 NVM_DIR 路径

4.7 npm 镜像与 yarn

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# 设 sass 镜像
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

# 设 registry 镜像
npm config set registry https://registry.npmmirror.com

# 装 nrm（registry 切换器）
npm install -g nrm
nrm ls
nrm use taobao

# 装 yarn
npm i -g yarn
yarn -v
# 1.22.19

# 临时使用镜像
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass npm install node-sass

五、zsh 下 Node 多版本切换

1
2
3
4


vim ~/.zshrc

export NODE_HOME=/data/jenkins/.nvm/versions/node/v14.17.3
export PATH=$NODE_HOME/bin:$PATH

六、Jenkins 跑前端项目

1
2
3
4
5
6
7
8
9


killall -9 node_modules || true
source /etc/profile
cd /home/docker/jenkins/workspace/safe-frontend-dev
rm -rf node_modules
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm config set registry https://registry.npm.taobao.org/
npm -g i yarn
yarn
nohup yarn run serve > /dev/null 2>&1 &

七、用 systemd 启动 Java 微服务

7.1 准备启动脚本

1
2


# 写微服务启动脚本
vim /home/project/safety/sh/gateway.sh

1
2
3
4
5
6
7


#!/bin/bash
# gateway.sh 示例
export JAVA_HOME=/usr/local/jdk/jdk1.8.0_371
export PATH=$JAVA_HOME/bin:$PATH

cd /home/project/safety
java -jar gateway.jar --spring.profiles.active=prod

1

chmod +x /home/project/safety/sh/gateway.sh

7.2 写 service 文件

1

vim /etc/systemd/system/gateway.service

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


[Unit]
Description=Gateway Service
After=network.target

[Service]
Type=simple
User=root
ExecStart=/home/project/safety/sh/gateway.sh
Restart=always
RestartSec=10
StandardOutput=journal
StandardError=journal

[Install]
WantedBy=multi-user.target

7.3 启动与管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


systemctl daemon-reload

# 启动
systemctl start gateway

# 开机启动
systemctl enable gateway

# 状态
systemctl status gateway

# 停止
systemctl stop gateway

# 失败重置
systemctl reset-failed gateway

# 卸载
rm -rf /etc/systemd/system/gateway.service

八、Java 反代启动命令

1
2
3
4
5


# 远程调试
java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5003 \
 -Xverify:none \
 -cp /jar/xjrsoft-base/lib/*:/jar/xjrsoft-base/config \
 com.xjrsoft.BaseApplication

关于 jdwp 端口：调试端口要开放给开发机，不能开放在公网。生产环境记得移除 jdwp 参数。

九、envsubst 模板化配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


# 模板 t.yaml
cat << "EOF" > t.yaml
systeminfo:
 OS: $OS
 user: $USER
 home: $HOME
 args:
 [
 "$args"
 ]
EOF

# 脚本 t.sh
cat << "EOF" > t.sh
#!/usr/bin/env bash
export OS=$(uname -s)
export args="/wait.sh 10.8.33.127:8848 -t 0"
ports=(100 200 300)
nodePort=30000
for p in ${ports[*]}; do
 nodePort=$[$nodePort+1]
 sed -i "8a \ - name: port$p\n port: $p\n targetPort: $p\n nodePort: $nodePort" t.yaml
done
envsubst < t.yaml > t1.yaml
EOF

bash t.sh

场景：用一份模板 + 环境变量生成 K8s manifest / docker-compose / nginx 配置。

十、前置知识 / 下一步

想看 JDK 17/21 新特性 → 翻本系列《JDK 升级与新特性》
想看 Maven 私服（Nexus / Artifactory）→ 翻本系列《Maven 私服搭建》
想看 Node 微前端构建优化 → 翻独立文章
想看 systemd 高级用法（target、socket 激活）→ 翻本系列《Linux 监控与系统性能工具》

十一、参考资源

Oracle JDK 8u 文档：https://docs.oracle.com/javase/8/docs/
Apache Maven 文档：https://maven.apache.org/
NVM GitHub：https://github.com/nvm-sh/nvm
Node.js 发布历史：https://nodejs.org/en/about/previous-releases
npmmirror：https://npmmirror.com/
systemd.service 文档：https://www.freedesktop.org/software/systemd/man/systemd.service.html

2024 视角：JDK 21 LTS 已经发布，Node 20/22 时代来了

2022 年写的那套"JDK 8 + Maven 3.9 + NVM + Node 14"在 2024 仍然可用，但新项目已经普遍升级。

一、JDK：JDK 17 已是新项目主流，JDK 21 LTS 已发布

JDK 21 LTS（2023-09 发布）是 2024 新项目首选——虚拟线程（Virtual Threads）正式 GA：

1
2
3
4
5
6
7
8
9


// 虚拟线程写法（替代传统 Thread / ExecutorService）
try (var executor = Executors.newVirtualThreadPerTaskExecutor()) {
 IntStream.range(0, 10_000).forEach(i -> {
 executor.submit(() -> {
 Thread.sleep(Duration.ofSeconds(1));
 return i;
 });
 });
}

JDK 17 LTS（2021-09 发布）仍是 2024 大量"半新"项目的目标版本。
JDK 8（2014）已 2022-03 进入"个人免费但商业收费"模式（Oracle），2024 新项目不应该用 Oracle JDK 8——改用：
- Adoptium Eclipse Temurin 8（免费、长期维护）
- Amazon Corretto 8（AWS 维护）
- Alibaba Dragonwell 8（国内阿里维护，对 JVM 调优有特化）

装新版：

1
2
3
4
5


# Adoptium Temurin 21 (推荐)
apt install -y wget gnupg
wget -qO - https://packages.adoptium.net/artifactory/api/gpg/key/public | gpg --dearmor -o /usr/share/keyrings/adoptium.gpg
echo "deb [signed-by=/usr/share/keyrings/adoptium.gpg] https://packages.adoptium.net/artifactory/deb $(lsb_release -sc) main" > /etc/apt/sources.list.d/adoptium.list
apt update && apt install -y temurin-21-jdk

二、Maven 3.9 仍主流，但 Gradle 在 K8s / 云原生时代更受宠

Maven 3.9.6（2024-02 发布）是 2024 的稳定版，mvn -v 默认输出包含 Java version: 21.x。
Gradle 8.x（2023-10 起）支持 Java 21 + Kotlin 2.0，新项目可以选 Gradle。
Bazel（Google）和 Pants（Twitter）是更大规模 monorepo 项目的选择，但 2024 仍小众。

三、Node 20 LTS / 22 LTS 时代

Node 18（2022 LTS）2025-04 EOL，Node 20 LTS（2023-04）是 2024 主流，Node 22 LTS（2024-10 发布）开始被新项目采用。
NVM 0.39.7+ 仍是主流（但 2024 出现了 fnm 替代品，用 Rust 写、速度快 10 倍）。
Node 22 内置 --experimental-strip-types（原生运行 TypeScript，无需 ts-node 编译）。

1
2
3
4
5


# 2024 推荐：用 fnm 替代 nvm
curl -fsSL https://fnm.vercel.app/install | bash
fnm install 22
fnm use 22
node -v # v22.x.x

四、cn 镜像的变化

registry.npmmirror.com 仍是 2024 首选 npm 镜像。
新增 https://registry.npmmirror.com/-/binary/ 提供 Node 二进制镜像（替代 taobao 老的 npm.taobao.org/dist/）。

corepack（Node 16+ 内置）一站式管理 yarn / pnpm：

1
2


corepack enable
corepack prepare yarn@stable --activate

五、systemd 启动 Java 服务的"v2 写法"

2024 推荐加 cgroup v2 资源限制 + 安全沙箱：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


[Service]
Type=simple
User=appuser
ExecStart=/usr/local/jdk/bin/java -jar /opt/app.jar
Restart=always
RestartSec=10
# 资源限制
CPUQuota=200%
MemoryMax=2G
MemoryHigh=1G
# 安全加固
NoNewPrivileges=true
ProtectSystem=strict
ProtectHome=true
PrivateTmp=true
# 现代化：动态用户
DynamicUser=yes
# 日志
StandardOutput=journal
StandardError=journal

六、容器化时代的开发环境

2024 大量新项目**不再用"装在系统里的 JDK"**这套——直接走容器：

1
2
3
4
5


# 用容器跑 Maven 构建（避免污染系统）
docker run -it --rm \
 -v $PWD:/app -w /app \
 maven:3.9-eclipse-temurin-21 \
 mvn clean package

容器化开发环境的优势：

JDK 版本随项目走（不用每台机器装多个版本）
团队所有人 build 出来的产物一致
CI/CD 用同一镜像

Dev Container（VS Code Remote Containers）+ GitHub Codespaces 是 2024 的"标准动作"——开发机里根本不装 JDK，全在容器里。

Electron 跨平台桌面应用：从零搭建到打包分发

Sat, 15 Dec 2018 00:00:00 +0800

什么是 Electron

Electron 是 GitHub 2013 年推出的开源框架，让开发者用 HTML + CSS + JavaScript 构建跨平台桌面应用。核心 = Chromium + Node.js。

优势

Web 技术栈：React / Vue / Angular 任意
跨平台：一套代码，Windows / macOS / Linux
完整 Node.js API：文件系统、子进程、网络
生态丰富：VSCode、Slack、Discord、Notion 都是 Electron

快速开始

环境要求

Node.js 18+
npm / yarn / pnpm
平台原生工具：Windows 需 Visual Studio Build Tools，macOS 需 Xcode CLT，Linux 需 libnss3 等

创建项目

1
2


mkdir my-electron-app && cd my-electron-app
npm init -y

修改 package.json：

1
2
3
4
5
6
7
8


{
 "name": "my-electron-app",
 "version": "1.0.0",
 "main": "main.js",
 "scripts": {
 "start": "electron ."
 }
}

安装：

1

npm install --save-dev electron

package.json 会加：

1
2
3


"devDependencies": {
 "electron": "^33.2.0"
}

main.js（主进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


const { app, BrowserWindow } = require('electron');
const path = require('path');

const createWindow = () => {
 const win = new BrowserWindow({
 width: 1200,
 height: 800,
 webPreferences: {
 preload: path.join(__dirname, 'preload.js'),
 contextIsolation: true, // 默认 true（安全）
 nodeIntegration: false, // 默认 false（安全）
 },
 });

 win.loadFile('index.html');
 // win.webContents.openDevTools();
};

app.whenReady().then(() => {
 createWindow();

 app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) {
 createWindow();
 }
 });
});

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

preload.js（预加载）

1
2
3
4
5
6
7


const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

index.html（渲染进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>My App</title>
</head>
<body>
 <h1>Hello, Electron!</h1>
 <button id="btn">点击</button>
 <p id="output"></p>

 <script>
 document.getElementById('btn').addEventListener('click', () => {
 window.api.invokeMethod('greet', 'World').then((result) => {
 document.getElementById('output').textContent = result;
 });
 });
 </script>
</body>
</html>

启动

1

npm start

打开开发者工具（DevTools）：Ctrl + Shift + I

进程架构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


┌──────────────────────┐ ┌──────────────────────┐
│ Main Process │ │ Renderer Process │
│ (Node.js) │ IPC │ (Chromium) │
│ │ ←─────→ │ │
│ - 应用生命周期 │ │ - 渲染 UI │
│ - 创建 / 关闭窗口 │ │ - Web 前端 │
│ - 菜单 / 托盘 │ │ - 不能直接用 Node │
│ - 调用系统 API │ │ │
└──────────────────────┘ └──────────────────────┘
 ↑ ↑
 │ │
 │ ┌────────────────┐ │
 └────────→│ Preload │←──────┘
 │ (桥接) │
 │ - contextBridge│
 │ - 暴露受限 API │
 └────────────────┘

IPC 通信

方式 1：invoke / handle（推荐）

渲染进程：

1
2
3


// renderer.js
const result = await window.api.invokeMethod('greet', 'World');
console.log(result);

preload.js：

1
2
3


contextBridge.exposeInMainWorld('api', {
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

主进程：

1
2
3
4
5


const { ipcMain } = require('electron');

ipcMain.handle('greet', async (event, name) => {
 return `Hello, ${name}!`;
});

方式 2：send / on（单向）

渲染进程：

1
2
3
4


window.api.sendMessage('用户点击了');
window.api.onReply((event, data) => {
 console.log('收到主进程回复:', data);
});

preload.js：

1
2
3
4


contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
});

主进程：

1
2
3
4


ipcMain.on('message', (event, msg) => {
 console.log('收到:', msg);
 event.sender.send('reply', '已收到');
});

主进程 API

菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


const { Menu, app } = require('electron');

const template = [
 {
 label: '文件',
 submenu: [
 { label: '新建', accelerator: 'CmdOrCtrl+N', click: () => { /* ... */ } },
 { type: 'separator' },
 { role: 'quit' },
 ],
 },
 {
 label: '编辑',
 submenu: [
 { role: 'undo' },
 { role: 'redo' },
 { type: 'separator' },
 { role: 'cut' },
 { role: 'copy' },
 { role: 'paste' },
 ],
 },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

对话框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const { dialog } = require('electron');

// 打开文件
const result = await dialog.showOpenDialog({
 title: '选择文件',
 filters: [{ name: 'Text', extensions: ['txt', 'md'] }],
});
console.log(result.filePaths);

// 保存文件
const result = await dialog.showSaveDialog({
 title: '保存',
 defaultPath: 'untitled.txt',
});

// 消息框
await dialog.showMessageBox({
 type: 'info',
 title: '提示',
 message: '操作成功',
 detail: '已保存到磁盘',
});

系统托盘

1
2
3
4
5
6
7
8


const { Tray, Menu, nativeImage } = require('electron');

const tray = new Tray(nativeImage.createEmpty());
tray.setToolTip('My App');
tray.setContextMenu(Menu.buildFromTemplate([
 { label: '显示', click: () => { /* show window */ } },
 { label: '退出', click: () => { app.quit(); } },
]));

通知

1
2
3
4


new Notification({
 title: '新消息',
 body: 'Hello from main process',
}).show();

文件系统

主进程用 fs，渲染进程通过 IPC：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 主进程
ipcMain.handle('read-file', async (event, path) => {
 const fs = require('fs/promises');
 return await fs.readFile(path, 'utf8');
});

ipcMain.handle('write-file', async (event, path, content) => {
 const fs = require('fs/promises');
 await fs.writeFile(path, content);
});

渲染进程访问

完整框架（React / Vue）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# React + Vite
npm create vite@latest my-electron-app -- --template react-ts
cd my-electron-app
npm install
npm install --save-dev electron electron-builder

# 配置 vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 base: './',
 plugins: [react()],
 build: {
 outDir: 'dist',
 },
});

1
2
3
4
5
6
7


// package.json
"main": "main.js",
"scripts": {
 "dev": "concurrently \"vite\" \"electron .\"",
 "build": "vite build",
 "package": "electron-builder"
}

文件结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


my-electron-app/
├── electron/
│ ├── main.js
│ └── preload.js
├── src/
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── vite.config.ts
└── package.json

打包分发

electron-builder

1

npm install --save-dev electron-builder

package.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


{
 "build": {
 "appId": "com.example.myapp",
 "productName": "MyApp",
 "directories": {
 "output": "dist"
 },
 "files": [
 "electron/**/*",
 "dist/**/*",
 "package.json"
 ],
 "win": {
 "target": ["nsis", "portable"],
 "icon": "build/icon.ico"
 },
 "mac": {
 "target": ["dmg", "zip"],
 "icon": "build/icon.icns",
 "category": "public.app-category.developer-tools"
 },
 "linux": {
 "target": ["AppImage", "deb"],
 "icon": "build/icon.png",
 "category": "Development"
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 用 forge 一键导入
npx electron-forge import

# 打包
npm run make

# 结果
# Windows: out/MyApp Setup 1.0.0.exe
# macOS: out/MyApp-1.0.0.dmg
# Linux: out/MyApp-1.0.0.AppImage

electron-forge（替代方案）

1
2
3


npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

安全最佳实践

必须开启

1
2
3
4
5
6
7
8


new BrowserWindow({
 webPreferences: {
 contextIsolation: true, // 沙箱
 nodeIntegration: false, // 渲染进程禁用 Node
 sandbox: true, // Chromium 沙箱
 preload: path.join(__dirname, 'preload.js'),
 },
});

关闭新窗口

1
2
3
4
5
6


app.on('web-contents-created', (event, contents) => {
 contents.setWindowOpenHandler(({ url }) => {
 require('electron').shell.openExternal(url);
 return { action: 'deny' };
 });
});

CSP

1
2


<meta http-equiv="Content-Security-Policy"
 content="default-src 'self'; script-src 'self'">

自动更新

1

npm install --save-dev electron-updater

1
2
3
4


// main.js
const { autoUpdater } = require('electron-updater');

autoUpdater.checkForUpdatesAndNotify();

package.json：

1
2
3
4
5
6
7


"build": {
 "publish": {
 "provider": "github",
 "owner": "yourname",
 "repo": "myapp"
 }
}

性能优化

开启 V8 缓存：--js-flags="--max-old-space-size=4096"
启用 lazy load：路由懒加载
Web Worker 处理密集计算
offscreen 渲染：截图 / 录屏

常见问题

启动白屏

通常是预加载脚本报错。检查 preload.js 路径和 contextBridge 用法。

require is not defined

渲染进程不能直接用 require，必须通过 preload.js 暴露。

跨域请求

主进程可以任意跨域；渲染进程需要用 IPC 转发到主进程发起请求。

macOS 签名

1
2
3


# 开发者证书
codesign --deep --force --verify --verbose --sign "Developer ID Application: Name" MyApp.app
xcrun notarytool submit MyApp.zip --keychain-profile "AC_PASSWORD"

下一步

Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
桌面开发技术栈对比，看 2014-08-15《桌面开发技术栈对比》

参考资料

Electron 官方：https://www.electronjs.org/
Electron 文档：https://www.electronjs.org/docs/latest/
electron-builder：https://www.electron.build/
electron-forge：https://www.electronforge.io/
Awesome Electron：https://github.com/sindresorhus/awesome-electron

Node.js 与 NVM 版本管理：从单版本到多版本共存

Mon, 15 Aug 2016 00:00:00 +0800

为什么写这篇：2016 年的前端项目还经常"卡在 Node 版本"——A 项目要 Node 6、B 项目要 Node 8、C 项目要 Node 10……NVM（Node Version Manager）让一台机器同时装多个 Node 版本、随时切换。本文用 macOS/Linux（nvm-sh）和 Windows（nvm-windows）两条线讲解，最后给一个企业内网"从 Git 拉代码 → 构建 → 打 Docker 镜像 → kubectl apply"的全套脚本。

适用读者：刚装 Node 的新人；要维护多个不同 Node 版本项目的工程师；企业内网打包流水线维护者。

前置知识：会用命令行；知道 npm install 是什么。

1. Node.js 的版本节奏

Node.js 采用 SemVer（语义化版本） + LTS（长期支持） 双重节奏：

版本类型	说明	例子
Current（奇数大版本）	6 个月活跃开发期，包含新特性	17、19、21、23
Active LTS（偶数大版本）	12 个月活跃支持期，bugfix + 安全更新	18 LTS、20 LTS、22 LTS
Maintenance LTS	18 个月维护期，仅修安全漏洞	16 → 2023-09 终止
End-of-Life	不再提供任何更新，生产环境必须避免	14、17、19

选型建议：生产项目永远用 Active LTS。本文写作时的 LTS 主流是 Node 20.x / 22.x。

Node 重大里程碑：

版本	年份	关键变化
0.10	2013	第一个被广泛使用的稳定版
4.x	2015-09	0.12 → 4.0 的大版本合并（io.js 回流）
6.x	2016-04	LTS 时代开启
8.x	2017-05	LTS + npm 5 + async_hooks
10.x	2018-04	HTTP/2、n-api 稳定
12.x	2019-04	V8 升级、ES Modules 试验
14.x	2020-04	首次原生支持 ES Modules、V8 8.1
16.x	2021-04	V8 9.0、fs/promises 稳定
18.x	2022-04	内置 fetch、test runner
20.x	2023-04	权限模型、Single Executable Applications
22.x	2024-04	内置 WebSocket、类型剥离

2. Linux/macOS：nvm-sh 安装与使用

2.1 完全卸载旧 Node

1
2
3
4
5
6
7


# Ubuntu / Debian
sudo apt remove --purge nodejs npm -y
sudo apt autoremove -y
sudo apt autoclean

# macOS（用 Homebrew 装的）
brew uninstall node

2.2 一行命令装 nvm

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

脚本会自动在 ~/.bashrc / ~/.zshrc / ~/.config/fish/config.fish 里追加：

1
2


export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

让配置生效：

1

source ~/.zshrc # 或 source ~/.bashrc

2.3 fish shell 用户

fish shell 用户可以装 nvm.fish 插件（基于 Fisher 插件管理器）：

1
2
3
4
5
6
7
8
9


# 装 Fisher
curl -sL https://raw.githubusercontent.com/jorgebucaran/fisher/main/functions/fisher.fish | source && fisher install jorgebucaran/fisher

# 装 nvm.fish
fisher install jorgebucaran/nvm.fish

# 卸载
fisher list
fisher remove jorgebucaran/nvm.fish

2.4 装指定版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


# 列出所有可装的版本
nvm ls-remote

# 装最新版 LTS
nvm install --lts

# 装指定版本
nvm install v22.21.1
nvm install 20
nvm install 18.18.2

# 列出已装的版本
nvm ls
# -> v18.18.2
# -> v20.12.0
# -> v22.21.1
# default -> lts/* (-> v22.21.1)

# 切换版本
nvm use 20.12.0
nvm use 18.18.2

# 查看当前版本
node -v
npm -v

2.5 用 .nvmrc 锁定项目版本

在项目根目录放一个 .nvmrc：

1

20.12.0

之后进项目就 nvm use，nvm 会自动读 .nvmrc 切到对应版本。

1
2


# 还可以自动 install
nvm install # 读 .nvmrc，没有就装 lts

2.6 镜像加速（推荐）

nvm-sh 装 Node 时默认从 nodejs.org 下载，国内很慢。可以设镜像：

1
2
3
4
5


# 临时（本次命令）
NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node nvm install 20

# 永久（写到 shell 配置）
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node

3. Windows：nvm-windows 安装与配置

Windows 上没有 nvm-sh，但有社区维护的 coreybutler/nvm-windows。

3.1 下载与安装

从 GitHub releases 下载最新 nvm-setup.zip（或免安装版 nvm-noinstall.zip），注意：必须以管理员权限运行 install.cmd。

3.2 配置 settings.txt

%NVM_HOME%\settings.txt（默认在 C:\Users\<用户>\AppData\Roaming\nvm\）：

1
2
3
4
5
6


root: <DEV_DIR>nvm
path: <DEV_DIR>nodejs
arch: 64
proxy: none
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

3.3 环境变量

变量	值
`NVM_HOME`	`<DEV_DIR>nvm`
`NVM_SYMLINK`	`<DEV_DIR>nodejs`
`PATH`	追加 `%NVM_HOME%;%NVM_SYMLINK%;`

Why 单独设 SYMLINK：nvm-windows 用 junction 软链接把当前激活的 Node 目录指向 NVM_SYMLINK，命令行的 node / npm 走 PATH 就能找到。

3.4 日常使用

1
2
3
4
5
6


nvm version # 查看 nvm 版本
nvm list available # 列出可装的版本
nvm install 22.21.1 # 装 Node 22.21.1
nvm use 22.21.1 # 切换
nvm ls  # 已装列表
nvm upgrade # 自更新 nvm 自身

3.5 离线安装

公司内网完全没外网时，先在有外网的机器上下好 node-v22.21.1-win-x64.zip：

1
2
3
4
5


下到 <DEV_DIR>nvm\v22.21.1\
├── node.exe
├── npm.cmd
├── npx.cmd
└── node_modules\

文件夹名必须是 <version> 格式（v22.21.1）。然后 nvm use 22.21.1 即可。

4. 镜像加速：解决 npm 装包龟速

4.1 设置 npm 镜像

1
2
3
4
5
6
7
8


# 临时
npm install <pkg> --registry=https://registry.npmmirror.com

# 永久
npm config set registry https://registry.npmmirror.com

# 验证
npm config get registry

4.2 nrm：多镜像一键切换

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


npm install -g nrm

nrm ls
# npm ---------- https://registry.npmjs.org/
# yarn --------- https://registry.yarnpkg.com/
# tencent ------ https://mirrors.cloud.tencent.com/npm/
# cnpm --------- https://r.cnpmjs.org/
# taobao ------- https://registry.npmmirror.com/

nrm use taobao
nrm use cnpm

4.3 cnpm：完全镜像版 npm

1
2


npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install lodash # 走国内 CDN，比 npm 快 5-10 倍

4.4 常见代理配置

1
2
3
4
5
6
7


# 命令行
$ npm config set proxy http://127.0.0.1:1081
$ npm config set https-proxy http://127.0.0.1:1081

# 环境变量（推荐，重启 shell 失效）
export npm_config_proxy=http://127.0.0.1:1081
export npm_config_https_proxy=http://127.0.0.1:1081

小贴士：Windows 11 上 npm.cmd 调全局安装时，prefix -g 在新 Node 18+ 下有 bug。可以改：
1
sed -i "s|prefix -g|prefix --location=global|g" "$(which npm.cmd)"
或直接用 npm install -g xxx——18+ 已默认 --location=global，这条 hack 主要针对 16 及以下。

5. npm 全局路径规划

默认情况下，npm 把全局包装到 %APPDATA%\npm（Windows）或 /usr/local/lib/node_modules（macOS/Linux），污染系统盘且与 Node 版本绑定。

5.1 自定义全局路径

1
2
3
4
5
6


# 自定义 prefix
npm config set prefix "<NPM_GLOBAL_DIR>"

# 在 PATH 中加 %NPM_HOME%
set NPM_HOME=<NPM_GLOBAL_DIR>
set PATH=%NPM_HOME%;%PATH%

这样全局装的所有包都在 <NPM_GLOBAL_DIR>，重装 Node 不会丢全局包。

5.2 全局装包管理

1
2
3
4
5
6
7
8
9


# 查看已装的全局包
npm list -g --depth=0

# 卸载
npm uninstall -g <pkg>

# 手动清（极少见）
# Windows: 删除 C:\Users\<user>\AppData\Roaming\npm\node_modules
# Linux: 删除 /usr/local/lib/node_modules/<pkg>

6. VSCode 智能提示与配套工具

6.1 @types/node

在项目里装 @types/node 后，VSCode 能智能提示 Node 内置模块（fs、path、process）和环境变量：

1

npm install --save-dev @types/node

6.2 运行脚本

1
2
3


node serve.js
node --inspect serve.js # 开启调试端口 9229
node --inspect-brk serve.js # 第一行就断点

6.3 treer：项目结构可视化

1
2


npm install -g treer
treer -e tree.txt -i "/node_modules|.git|.idea/"

会输出：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


D:/workspace/github/my-app
├── dist
├── node_modules
├── public
├── src
│ ├── App.vue
│ ├── main.ts
│ └── router
│ └── index.ts
├── index.html
├── package.json
└── vite.config.ts

方便在博文/Issue/聊天里分享目录。

7. 物理机手动打包发布全流程

公司内网没有 CI/CD 时，“开发把代码推上 Git → 运维在跳板机上拉代码 → 构建 → 打镜像 → 更新 K8s” 是常见流程。下面是一个典型脚本（所有内部信息已脱敏）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


# ============ 1. 在构建机（127）执行 ============
# 用户名/密码：内部账号
cd /home/tmp

# 拉代码
git clone http://<GIT_HOST>:<PORT>/<ORG>/safety_microservices_vue.git
cd safety_microservices_vue/
git checkout -b hnTest
git pull origin hnTest

# 清理上次构建
rm -rf dist/

# 切 Node 版本
nvm use 18.18.2

# 用国内镜像
npm config set registry https://registry.npmmirror.com/
yarn config set registry https://registry.npmmirror.com/

# 清缓存重装
yarn cache clean --force
rm -rf node_modules
yarn
yarn build

# ============ 2. 同步到目标机（253）===========
cd /root/frontend
rm -rf *

# 用 sshpass 免密同步
sshpass -p <REDACTED> \
rsync -e 'ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null' \
 -avz --progress \
 root@<BUILD_HOST>:/home/tmp/safety_microservices_vue/dist /root/frontend/

mv dist html

# ============ 3. 打 Docker 镜像 ============
cat << "EOF" > Dockerfile
FROM <PRIVATE_REGISTRY>/base/bitnami/nginx:1.27.0-debian-12-r3
COPY html /app
EOF

docker build -t <PRIVATE_REGISTRY>/library/safety-frontend/pre:2025-08-18_001 .
docker push <PRIVATE_REGISTRY>/library/safety-frontend/pre:2025-08-18_001

# ============ 4. 改 K8s yaml 并应用 ============
sed -i "s|image:.*|image: <PRIVATE_REGISTRY>/library/safety-frontend/pre:2025-08-18_001|" \
 /data/k8scnf/safety-hnpre/11frontend.yaml
kubectl apply -f /data/k8scnf/safety-hnpre/11frontend.yaml

这种"半自动"流程的痛点：

任何一步失败要人工介入

镜像 tag 写死在 yaml 里，回滚要 git history

没有镜像扫描、签名、版本元数据

改进方向：把这条脚本拆成 GitLab CI / Jenkins Pipeline 的 stage，加 docker scan（trivy）、Helm Chart 管理版本。

小结

Node 装包是前端所有事的"前置依赖"。本文核心要点：

生产用 LTS（写作时是 Node 20/22），绝不用奇数版
多版本用 NVM（Linux/macOS）或 nvm-windows（Windows），.nvmrc 锁版本
国内必设镜像：registry.npmmirror.com 或 cnpm
npm 全局路径自定义，避免污染 C 盘或系统目录
物理机打包流程是"从 Git 到 K8s"的手动版，能跑但迟早要 CI/CD 化

参考资料

2024+ 视角：Node 22 LTS、pnpm 主导、Bun/Deno 三足鼎立

Node 22 LTS（2024-10 GA）核心变化

内置 WebSocket 客户端：globalThis.WebSocket 浏览器 API 移植，Node 服务端直接用
内置 node:test runner：不再依赖 Jest / Mocha 也能跑单测
权限模型（稳定）：--permission --allow-fs-read=./src 限制 Node 进程的 FS/网络/子进程权限
类型剥离（Type Stripping）：node --experimental-strip-types app.ts 直接跑 TS 文件
V8 12.4 升级：原生支持 Array.fromAsync / Error.cause 改进

1
2
3
4
5


# Node 22 一行跑 TS
node --experimental-strip-types app.ts

# 限制权限运行
node --permission --allow-fs-read=. --allow-fs-write=./dist app.js

Node 22 → Node 23 → Node 24 路线图

Node 23（2024-10 Current）：WebSocket 稳定、node:fs 性能优化
Node 24（2025-04 LTS）：内置 require(esm) 默认开启、V8 12.6、npm 11
Node 25（2025-10 Current）：实验性 HTTP/3、QUIC

pnpm 9.x 主导企业市场

pnpm 已成 2024+ 企业前端标配——比 npm 快 2-3 倍、磁盘占用节省 70%：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 装 pnpm
npm install -g pnpm@9

# 装依赖（比 npm 快 2-3 倍）
pnpm install

# monorepo 经典用法
pnpm -r add lodash
pnpm --filter my-app build
pnpm --filter my-app test

pnpm 核心优势：

硬链接 + 符号链接：项目间共享 node_modules 里的文件，磁盘省 70%
monorepo 原生支持：pnpm-workspace.yaml
依赖隔离更严：默认阻止"幽灵依赖"——只用 package.json 里声明的包
比 yarn 快、比 lerna 简单

Bun 1.x 2024+ 现状

Bun 是 Zig 写的 JavaScript 运行时——主打"Node 替代"：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 装 Bun
curl -fsSL https://bun.sh/install | bash

# 直接跑 TS
bun run app.ts

# 装依赖（比 npm 快 25 倍）
bun install

# 内置 SQLite / HTTP server / 打包器
bun --hot app.ts

维度	Node 22 LTS	Bun 1.x	Deno 2
启动速度	慢	3x 快	2x 快
装包速度	npm 11 一般	25x 快	1x
TS 支持	实验性 `--strip-types`	原生	原生
API 兼容	-	95% Node 兼容	Deno 原生
生产稳定	✅	较新	✅
生态	最大	增长中	中等

选型：

传统企业（稳）：Node 22 LTS + pnpm 9
新项目（性能优先）：Bun 1.x —— 启动快 3 倍、装包快 25 倍
Deno 强项：边缘计算（Deno Deploy）+ 安全沙箱

Node 测试生态 2024+

1
2
3
4
5
6
7
8


# Node 22 内置 test runner
node --test

# 第三方主流
vitest # 2024+ 最快（基于 esbuild）
node:test # 内置
jest # 老牌
playwright # E2E

1
2
3
4
5
6
7


// Node 22 内置 test runner 示例
import { test } from 'node:test';
import assert from 'node:assert/strict';

test('adds 1 + 2', () => {
 assert.equal(1 + 2, 3);
});

NVM 2024+ 替代品

fnm（Fast Node Manager）：Rust 写的，比 nvm 快 10 倍
volta：JavaScript 写的，团队级版本锁定
nvm-windows 仍是 Windows 唯一主流

1
2
3
4


# fnm（2024+ 推荐）
curl -fsSL https://fnm.vercel.app/install | bash
fnm install 22
fnm use 22

npm 11.x 关键变化

Workspaces 增强：npm install -w @myorg/pkg 直接给子包装
内置 SBOM 生成：npm sbom 输出 CycloneDX / SPDX 格式
npm exec 替代 npx 语义更清晰
Lockfile v3：package-lock.json 格式变化，更安全

Vite 6 + esbuild 2024+

1
2
3
4


# Vite 6（2024-11 GA）
npm create vite@latest my-app -- --template vue-ts
cd my-app
pnpm dev

Vite 6 引入 Environment API（SSR / SPA 统一 API）
Rolldown（Rust 写的 Rollup 替代）2024 进入 alpha——比 Rollup 快 10 倍
esbuild 0.24+ 完全稳定，TypeScript / JSX 编译首选

前端框架 2024+ 状态

框架	2024+ 状态
React 19	编译器优化、Server Components GA
Vue 3.5	响应式系统重写、性能 +50%
Svelte 5	Runes 语法（编译时反应性）+ 体积 -30%
Solid.js 1.9	2024 性能 SOTA
Astro 5	内容驱动 + Island 架构
Next.js 15	React 19 + Turbopack GA
Nuxt 3.14	Vue 3.5 + Nitro 2.10

2024+ 推荐组合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


企业前端项目（稳）
├── Node 22 LTS（2024-10 GA）
├── pnpm 9.x（依赖管理）
├── Vite 6（构建）
├── TypeScript 5.6+（类型）
├── Vitest（测试）
├── ESLint 9 + Prettier 3（代码风格）
└── Playwright（E2E）

新项目（性能优先）
├── Bun 1.x（运行时）
├── Vite 6 + Rolldown alpha
├── TypeScript 5.6+
└── Solid.js / Svelte 5（轻量框架）