基于Sublime Text与Rollup构建系统的前端轻量级SDK打包流程-sublime-PHP中文网

sublime text 需通过构建系统调用本地 rollup，因其默认不识别 rollup 命令且 path 与终端不一致；推荐配置 npm run build 构建系统并确保 rollup.config.js 正确导出 default 对象。

基于sublime text与rollup构建系统的前端轻量级sdk打包流程

Sublime Text 本身不打包，也不运行 Rollup；它只负责写代码、触发命令、显示结果。真正打包的是你本地装的 rollup 命令，而 Sublime 需要通过构建系统（Build System）调起它。

为什么 Sublime 的默认构建不能直接跑 Rollup

Sublime 默认构建系统只认识 node、python 这类基础解释器，不认识 rollup —— 即使你全局或本地装了 rollup，Sublime 也不会自动找到它的可执行路径，尤其在 macOS 或 Windows 的非标准 shell 环境下更常出错。

常见错误现象：sh: rollup: command not found 或 The system cannot find the path specified
根本原因：Sublime 的构建环境 PATH 与终端不一致，找不到 rollup 可执行文件
解决思路不是“重装 rollup”，而是显式指定可执行路径或复用 npm script
推荐做法：统一走 npm run build，靠 package.json 中的 "build": "rollup -c" 调度，避免路径问题

如何配置 Sublime 构建系统调用 rollup

新建一个构建系统（Tools → Build System → New Build System），内容如下（适配 macOS/Linux）：

{
  "shell_cmd": "npm run build",
  "working_dir": "${project_path:${folder}}",
  "selector": "source.js",
  "variants": [
    {
      "name": "Build & Watch",
      "shell_cmd": "npm run dev"
    }
  ]
}

关键点：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

"shell_cmd" 必须是能直接在终端里跑通的命令，比如 npm run build，而不是裸写 rollup -c
"working_dir" 确保命令在项目根目录执行，否则 rollup.config.js 找不到
如果用了 rollup.config.dev.js，对应 package.json 里得有 "dev": "rollup -c rollup.config.dev.js"
Windows 用户注意：shell_cmd 中不要用单引号，且建议用 npm.cmd run build 替代 npm run build

Rollup 配置必须匹配 SDK 输出目标

SDK 不是网页应用，output.format 选错会导致别人 require 不进、CDN 加载失败、或破坏 Tree Shaking。

对外发布 UMD 包（兼容 script 标签 + CommonJS + AMD）：用 format: "umd"，并设 name: "MySdk"
仅提供给 ES 模块项目（如 Vite、Webpack 5+）：用 format: "esm"，体积最小，支持原生 Tree Shaking
不要用 cjs 作为主输出——Node.js 里能跑，但浏览器里无法直接 import，也不被现代 bundler 优先识别
务必加 external: ["lodash", "axios"]，把第三方依赖排除，否则会打进去污染使用者的依赖树
开发时开启 sourcemap: true，但生产构建要关掉，或单独生成 .map 文件上传到 npm

Sublime 下调试 Rollup 报错最有效的三件事

Rollup 错误信息常藏在堆栈深处，Sublime 不像 VS Code 那样自动跳转，得手动干预：

打开 Sublime 控制台（Ctrl+`），看完整报错，重点找 ParseError、Cannot find module、Plugin xxx is not installed
检查 rollup.config.js 是否导出 default 对象，不是 module.exports = {...} —— Rollup v3+ 强制要求 ES module 导出
插件缺失时别直接 npm install，先确认版本兼容性：@rollup/plugin-node-resolve@^15 不兼容 Rollup v4，得降级到 @13 或升 rollup 到 v4.9+