EFE前端脚手架工具
将 efe、jenkins 和 efe-release 接入 VS Code:从侧边栏或命令面板启动常用操作,在任务终端继续交互并查看日志。
安装和首次使用
- 准备 VS Code 1.85 或更高版本,以及可运行
efe-activity-cli 的 Node.js 环境。
- 在 VS Code 扩展面板的
… 菜单中选择 从 VSIX 安装,选择 efe-activity-vscode-0.1.15.vsix。
- 打开活动项目,信任工作区后,在设置中搜索
EFE。
- 首次使用本次改造的 CLI,请将
efe.cliPackagePath 设置为本仓库的绝对路径,并先在仓库运行 pnpm build。它应包含 package.json 和 dist/bin。
- 点击左侧 EFE 图标,运行 检查 CLI 环境,再按需运行 初始化账号配置。
插件会在每次启动 CLI 任务时读取已有的 ~/.efe/account.json,并将其中非空账号字段作为该次任务的优先运行时凭据,因此 Git 克隆或全局 npm 安装的既有用户不需要重新配置。文件内容不会写入工作区、输出面板或扩展设置,也不会复制到钥匙串。点击 初始化账号配置 后填写的新账号凭据和 FTP 连接仍保存到 VS Code SecretStorage,由 macOS 钥匙串、Windows Credential Manager 或 Linux 的密钥服务保护。账号配置状态只显示来源和是否填写,不展示 Token、密码或验证服务连接。
每次执行 CLI 时,插件仅向该任务的子进程传入运行时环境变量,凭据不会出现在命令行参数、工作区设置、项目文件、任务定义、输出面板或终端日志中。直接在终端运行 CLI 仍兼容旧版 ~/.efe/account.json;CLI 下次写入时会将目录和文件分别设为 0700、0600。
插件不会自动安装、更新或内置 CLI。团队发布包含本次修复的 CLI 后,可以使用:
npm i -g efe-activity-cli --registry=https://npm.efun.com
随后清空 efe.cliPackagePath,即可自动寻找安装位置。旧版 CLI 将图片压缩的 --source / --destination 声明为布尔开关,无法接受目录参数;使用压缩入口前必须使用包含本次修复的 CLI。
功能
| 入口 |
行为 |
| 检查 CLI 环境 |
检查 Node、CLI 安装目录、三个命令入口和版本 |
| 初始化账号配置 |
将账号或 FTP 凭据保存到操作系统钥匙串,不创建账号 JSON 文件 |
| 查看账号配置状态 |
只显示钥匙串中各项是否填写,不输出凭据内容 |
| 创建活动项目 |
选择 Vue / jQuery 模板和父目录,在终端填写项目名称及其他参数 |
| 添加 / 查看 / 删除项目模板 |
在终端维护 EFE 本地模板列表;删除前会在终端再次选择具体模板 |
| 复制目录 |
选择源目录与目标目录,确认后复制;同名文件可能被覆盖 |
| 交互式项目命令 |
运行 CLI 的 efe start,在终端选择开发、构建、部署等项目脚本 |
| 压缩图片目录 |
JPG / PNG 压缩到源目录旁的 <目录名>-optimized,保留源文件 |
| 目录图片转 WebP / AVIF |
在源目录及其子目录生成对应格式文件;已有同名输出按 CLI 行为处理 |
| 目录 PNG 转 JPG |
输出到源目录旁的 <目录名>-jpg;默认跳过带透明像素的图片 |
| 上传目录到 CDN |
选择目录和目标路径,留空目标则使用项目配置,确认后执行 |
| 上传目录到 FTP |
填写配置名、选择区域和上传模式,确认后执行 |
| 并行上传目录到 FTP |
填写多个 FTP 配置名后并行上传同一目录 |
| Jenkins 构建与日志 |
保存常用 Pipeline / Job 并快速触发,也可搜索任务、选择预设任务或查看日志 |
| 生成并上传官网模板 |
按项目官网模板配置生成 FTL 并上传到 GitLab 模板仓库 |
| 批量升级项目依赖 |
选择多个子项目的父目录,在终端选择升级项;可能执行 Git 与安装操作 |
| 创建并自动合并 GitLab MR |
拉取目标分支、创建 MR 并在可合并时自动合并,执行前需确认 |
| 发布 npm 包版本 |
选择版本类型、确认项目,再进入现有发布流程 |
| 发布 VS Code 扩展 |
选择版本类型与发布目标,走 efe-release vsix 升版并打包 .vsix,可上传 Marketplace |
| 检查 util 版本 |
对所选项目执行 efe check-util,可能安装或更新依赖 |
资源管理器中右键单个目录 → EFE 工具,可以直接进行图片处理或资源上传。命令面板搜索 EFE 可访问所有功能。
「发布 VS Code 扩展」通过 efe-release vsix 升版并打包,需要包含该子命令的 CLI:源码方式请先在仓库根执行 pnpm build(并把 efe.cliPackagePath 指向该仓库);全局安装方式请在团队发布新版本后更新。该命令会把工作目录当作 efe-activity-cli 仓库根来发布其中的 extensions/vscode,请在仓库根目录执行。
侧边栏标题右侧的放大镜可搜索全部工具,选择后直接进入对应操作;筛选图标可勾选需要显示的工具。隐藏的工具仍可通过搜索工具和命令面板调用,随时可重新勾选显示。
在 Jenkins 构建与日志 → 管理常用 Job 中,首次配置会直接进入两步输入:先填写只供扩展列表显示的快捷名称,例如“活动预发布”;再填写 Jenkins 的实际 Pipeline / Job 完整名称。若 Jenkins URL 是 …/job/frontend/job/activity-pre-release/,应填写 frontend/activity-pre-release。已有常用项时,先在列表选择“新增常用 Jenkins Job”或某个已有 Job;列表顶端输入框只用于筛选,不用于填写配置。随后在 快速触发常用 Job 中选择即可运行 jenkins run <Job 名称>。这些常用项仅保存在当前 VS Code 用户的扩展本地状态中,不包含 Jenkins 用户名或 Token。Jenkins 入口需要 efe-activity-cli 1.0.17 或更高版本;源码方式运行请重新执行 pnpm build,全局安装方式请在团队发布 1.0.17 后重新安装该版本。
工作目录和执行方式
- 单项目使用项目根目录;多项目工作区先选择项目,右键操作优先使用目录所属项目。
- 上传目录必须位于所选项目内。插件传递相对路径,兼容 CLI 的目录拼接规则,并保留项目配置读取位置。
- 图片源目录传递绝对路径。受 CLI 的逗号分隔规则限制,暂不支持包含逗号的图片路径。
- 每个任务用独立 Node.js 进程运行,通过 VS Code
ProcessExecution 传递参数,不拼接 shell 命令。终端交互、颜色和执行日志由 CLI 提供。
- 同一项目同时只启动一个 EFE 任务。在命令面板运行 任务: 终止任务 可以停止任务;发布、上传已产生的外部变更不会回滚。
- 任务详细日志在终端,启动记录、退出码和环境检查在 输出 → EFE。退出码由 CLI 决定;仍应留意 CLI 输出中的单文件处理错误。
- FTP 连接信息只从安全配置的系统钥匙串中读取。FTP 目标路径可以继续保存在项目
efe-config.cjs;如需完全脱离项目配置,可由管理员设置 EFE_FTP_TARGETS JSON 映射。CLI 不再接受源码中的默认 FTP 凭据,也不会输出 FTP 协议认证详情。
- 从 Git 仓库或全局 npm 包直接运行 CLI 时,既有
~/.efe/account.json 账号配置仍然兼容,并会被扩展优先用于每次 CLI 任务;FTP 可通过 efe config:ftp 保存到仅当前用户可读的 ~/.efe/ftp.json。扩展不会读取命令行的 FTP 凭据文件。
- 首版面向桌面 VS Code 的文件系统工作区,不支持 vscode.dev 或虚拟工作区。Remote SSH / WSL / Dev Containers 尚未验证。
安全发布清单
发布到 Marketplace 前,必须先轮换曾经出现在历史版本中的 FTP 密码。移除源码不会使旧提交、旧 npm 包或旧 VSIX 中的密码失效。
- 在 FTP 服务端撤销旧账号或改密,并检查该账号的访问日志。
- 将新版 CLI 与扩展发布给团队,要求成员通过 初始化账号配置 → 配置 FTP 连接 重新保存凭据。
- 评估是否需要清理 Git 历史和已发布的旧 npm 版本;这会影响其他开发者的 clone 与分支,需要由仓库管理员协调执行。
- 使用
.gitleaks.toml 在发布 CI 中扫描待发布的提交和 VSIX。不要把真实 Token、密码、私钥或内部连接 JSON 写入测试、文档或示例。
- FTP 服务支持时,选择 FTPS;普通 FTP 会明文传输认证信息,只应作为兼容旧服务器的临时方案。
设置
| 配置 |
默认值 |
说明 |
efe.cliPackagePath |
空 |
CLI npm 包或已构建源码仓库的绝对路径;明确设置但无效时直接报错 |
efe.nodePath |
node |
Node 可执行文件名或绝对路径,不包含参数 |
CLI 自动查找顺序:项目及父目录的 node_modules/efe-activity-cli → PATH 中的 npm/pnpm 链接或 npm 安装目录 → npm root -g。若 VS Code 没有继承终端中的 nvm / Volta / pnpm 环境,请显式设置上述路径。
开发和打包
CLI 仓库根目录:
pnpm build
npm run vscode:install
npm run vscode:test
npm run vscode:package
插件依赖和锁文件独立于 CLI。vscode:install 使用插件目录的 package-lock.json;构建和打包无需改动 CLI 的依赖。
产物位于 extensions/vscode/efe-activity-vscode-0.1.15.vsix。本地安装也可使用:
code --install-extension extensions/vscode/efe-activity-vscode-0.1.15.vsix
开发调试时,在 VS Code 中单独打开 extensions/vscode,按 F5 启动扩展开发宿主;在新窗口打开一个活动项目,并配置 efe.cliPackagePath 指向已构建的 CLI 仓库。
publisher: efunitweb 是团队已在 VS Code Marketplace 注册的发布者。Marketplace 上的扩展标识为 efunitweb.efe-activity-vscode。
从旧内部 VSIX(efun.efe-activity-vscode)切换到 Marketplace 时,需要手动安装一次 Marketplace 版本并卸载旧扩展,因为发布者 ID 是扩展标识的一部分。efe.* 设置和 ~/.efe/account.json 可以继续使用;仅旧扩展 SecretStorage 中的凭据需在新扩展中重新配置。
验证
npm test 在插件目录运行类型检查及 Node.js 自动化测试,覆盖安装探测、路径传递、工作区选择、取消、发布确认、任务生命周期和凭据隐藏。
tests/smoke.cjs 可在真实 VS Code 中验证扩展激活和任务进程。它只在临时工作区生成模拟 CLI,不调用真实上传、发布或账号配置:
# 在插件目录运行;code 命令需已加入 PATH
EFE_SMOKE_DIR=$(mktemp -d)
mkdir -p "$EFE_SMOKE_DIR/workspace"
EFE_TEST_NODE=$(node -p 'process.execPath') code \
--user-data-dir="$EFE_SMOKE_DIR/user-data" \
--extensions-dir="$EFE_SMOKE_DIR/extensions" \
--disable-extensions --disable-workspace-trust \
--skip-welcome --skip-release-notes \
--extensionDevelopmentPath="$PWD" \
--extensionTestsPath="$PWD/tests/smoke.cjs" \
"$EFE_SMOKE_DIR/workspace"
VS Code 接入使用官方 Extension API,打包使用 vsce。