不装 webpack 也能构建：npm scripts 轻量方案

最近写了个两百行的日期工具库想发 npm。建项目时下意识想配 webpack，配到一半突然意识到：一个不依赖 DOM 的纯函数库，真的需要打包器吗？

最后我用纯 npm scripts 搭了套构建流程，配置文件只有 package.json 一个。记录一下这套轻量方案。

想清楚需求

先列这个库真正需要的流程：

源码检查（ESLint）
单元测试（jest）
ES6+ 转 ES5（babel，为了兼容老环境）
输出一份压缩版
发布前全部跑一遍

没有模块依赖图要打平（源码就是单文件）、没有 CSS/图片要处理——webpack 的核心价值在这个项目里几乎为零。

最终方案

{
  "name": "tiny-date-kit",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": ["dist"],
  "scripts": {
    "lint": "eslint src",
    "test": "jest --coverage",
    "build": "babel src --out-dir dist",
    "build:min": "terser dist/index.js -o dist/index.min.js -c -m",
    "prepublishOnly": "npm run lint && npm test && npm run build && npm run build:min"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.0",
    "@babel/preset-env": "^7.9.0",
    "eslint": "^6.8.0",
    "jest": "^25.5.0",
    "terser": "^4.6.0"
  }
}

整个构建管线就是四行 scripts。逐个拆解。

逐条解析

lint + test：纯调度，没什么可说的：

npm run lint   # eslint src
npm test       # jest --coverage

build：babel 命令行

很多人不知道 babel 自带 CLI（@babel/cli），不走 webpack 也能编译：

babel src --out-dir dist

配合 .babelrc：

{
  "presets": [["@babel/preset-env", { "targets": { "ie": "11" } }]]
}

build:min：terser 直接压缩

terser dist/index.js -o dist/index.min.js -c -m

-c 压缩（compress）、-m 混淆变量名（mangle）。输出体积从 8KB 压到 3KB。

prepublishOnly：发布门禁

npm publish 前自动执行，lint/test/build 任何一个挂了都发不出去。这个钩子是防手滑的最后防线。

命令编排的三个语法

npm scripts 看似简单，编排起来有几个实用技巧：

串行：&&

"check": "npm run lint && npm test"

前一个失败就不继续（Windows 下 cmd 也支持）。

并行：& 或 npm-run-all

跨平台并行推荐装个 npm-run-all：

"check": "npm-run-all --parallel lint test"

前缀通配

{
  "scripts": {
    "build:lib": "babel src --out-dir dist",
    "build:min": "terser ...",
    "build": "npm-run-all build:*"
  }
}

build:* 匹配所有 build: 开头的命令，加一个子任务不用改主命令。

什么时候这套够用，什么时候老实上打包器

npm scripts 够用：

纯函数库、工具库（无模块图要打平，babel 单文件转译即可）
Node 脚本、CLI 工具
文档站、Demo 页（几行 JS 那种）

该上打包器：

有 import 依赖图要解析打平（多文件互相引用，目标是单文件产物）
要处理 CSS/图片/字体等静态资源
要 Tree-shaking、代码分割、按需加载
开发时要 HMR 热更新

判断标准一句话：你需要的是"转译"还是"打包"？ 前者 babel 单干就够，后者才轮到 webpack/rollup。

补充：库作者请试试 rollup

如果这个库长大了（多文件、要 tree-shaking 友好的 ESM 产物），轻量首选是 rollup 而不是 webpack——配置简洁、产物干净、天生为库设计。这属于下一步进化，本篇不展开。

小结

纯函数库不需要打包器：babel CLI 转译 + terser 压缩就够了
npm scripts 编排：&& 串行、npm-run-all 并行、前缀通配分组
prepublishOnly 钩子是发布前的自动门禁
选型问自己：要转译还是要打包

工具的价值在于匹配场景。两百行的库配两百行的 webpack 配置，这不叫工程化，叫行为艺术。