NPM 生態(tài)浩如煙海，除了那些耳熟能詳?shù)膸?kù)（如 lodash、axios），其實(shí)還有很多冷門但極其實(shí)用的工具庫(kù)。它們可能默默無(wú)聞，但在特定場(chǎng)景下能大幅提升開(kāi)發(fā)效率。

今天，我們就來(lái)盤點(diǎn)十個(gè)壓箱底的 NPM 庫(kù)，讓你的代碼更優(yōu)雅、開(kāi)發(fā)更高效！

1. path-to-regexp：動(dòng)態(tài)路由解析神器

適用場(chǎng)景：前端路由、API 路徑匹配

你是否在手動(dòng)解析 /:userId/posts/:postId 這樣的動(dòng)態(tài)路由？path-to-regexp 可以幫你輕松搞定！它是 react-router 和 express 等庫(kù)的底層依賴，支持將路徑模式轉(zhuǎn)換為正則表達(dá)式，并提取參數(shù)。

import { pathToRegexp } from "path-to-regexp";

const pattern = "/user/:id";
const regexp = pathToRegexp(pattern);
const match = regexp.exec("/user/123"); // { id: "123" }

推薦理由：

• 輕量級(jí)，無(wú)額外依賴
• 支持復(fù)雜路由匹配（如 /blog/:year(\\d{4})）

2. numeral：數(shù)字格式化大師

適用場(chǎng)景：貨幣、百分比、時(shí)間格式化

numeral 是一個(gè)強(qiáng)大的數(shù)字格式化庫(kù)，支持貨幣、百分比、字節(jié)單位等格式，比 toLocaleString 更靈活。

import numeral from "numeral";

numeral(1000.234).format("$0,0.00"); // "$1,000.23"
numeral(0.1234).format("0.00%");      // "12.34%"

推薦理由：

• 支持多種語(yǔ)言（國(guó)際化）
• 鏈?zhǔn)秸{(diào)用，API 簡(jiǎn)潔

3. cross-env：跨平臺(tái)環(huán)境變量設(shè)置

適用場(chǎng)景：Windows + Mac/Linux 兼容開(kāi)發(fā)

在 package.json 里設(shè)置環(huán)境變量時(shí)，Windows 和 Unix 系統(tǒng)的語(yǔ)法不同，cross-env 可以讓你寫一份腳本，兼容所有平臺(tái)！

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack"
  }
}

推薦理由：

• 徹底解決 "SET NODE_ENV=development" 和 "NODE_ENV=development" 的兼容問(wèn)題
• 零配置，即裝即用

4. msw (Mock Service Worker)：API 模擬神器

適用場(chǎng)景：前端 Mock 數(shù)據(jù)、測(cè)試

不想依賴后端 API？msw 可以攔截 fetch 或 XMLHttpRequest，返回模擬數(shù)據(jù)，支持瀏覽器和 Node.js 環(huán)境。

import { setupWorker, rest } from "msw";

const worker = setupWorker(
  rest.get("/api/user", (req, res, ctx) => {
    return res(ctx.json({ name: "John" }));
  })
);

worker.start();

推薦理由：

• 無(wú)侵入式 Mock，不影響真實(shí)請(qǐng)求
• 支持 GraphQL

5. command-line-args：命令行參數(shù)解析

適用場(chǎng)景：CLI 工具開(kāi)發(fā)

不想手動(dòng)解析 process.argv？command-line-args 讓你用配置的方式定義命令行參數(shù)，并自動(dòng)解析。

import commandLineArgs from "command-line-args";

const options = commandLineArgs([
  { name: "input", alias: "i", type: String },
  { name: "verbose", alias: "v", type: Boolean }
]);

console.log(options); // { input: "file.txt", verbose: true }

推薦理由：

• 支持短參數(shù)（-v）和長(zhǎng)參數(shù)（--verbose）
• 可搭配 command-line-usage 生成幫助文檔

6. fast-glob：超快文件匹配

適用場(chǎng)景：構(gòu)建工具、批量文件處理

比 fs.readdir 更強(qiáng)大！fast-glob 支持 **/*.ts 這樣的通配符，并返回匹配的文件列表。

import fastGlob from "fast-glob";

const files = await fastGlob(["src/**/*.ts"]);
// ["src/index.ts", "src/utils.ts", ...]

推薦理由：

• 比原生 glob 更快
• 支持異步/同步模式

7. chokidar：文件監(jiān)聽(tīng)利器

適用場(chǎng)景：熱更新、自動(dòng)化腳本

fs.watch 不夠穩(wěn)定？chokidar 提供了更可靠的文件監(jiān)聽(tīng)功能，支持遞歸監(jiān)聽(tīng)。

import chokidar from "chokidar";

chokidar.watch("src/**/*.js").on("change", (path) => {
  console.log(`文件已修改: ${path}`);
});

推薦理由：

• 跨平臺(tái)兼容（Windows/Mac/Linux）
• 支持防抖（debounce）

8. relationship：中國(guó)親戚關(guān)系計(jì)算器

適用場(chǎng)景：社交應(yīng)用、家譜管理

輸入“表哥”，返回“堂兄弟的兒子”？這個(gè)庫(kù)能幫你理清中文親屬關(guān)系！

import relationship from "relationship";

const result = relationship({ text: "表哥" });
// ["堂兄弟的兒子", "堂姐妹的兒子"]

推薦理由：

• 支持多種稱謂計(jì)算
• 純中文場(chǎng)景優(yōu)化

9. tippy.js：現(xiàn)代化 Tooltip 庫(kù)

適用場(chǎng)景：UI 交互增強(qiáng)

比原生 title 更強(qiáng)大！tippy.js 支持動(dòng)畫、主題、交互式彈窗等。

import tippy from "tippy.js";

tippy("#button", {
  content: "這是一個(gè)提示",
  animation: "fade"
});

推薦理由：

• 輕量級(jí)（僅 5KB）
• 支持 React/Vue 集成

10. cosmiconfig：靈活的配置文件加載器

適用場(chǎng)景：CLI 工具、構(gòu)建工具

支持從 package.json、.rc 文件、.config.js 等多種方式加載配置，被 ESLint、Prettier 等工具采用。

import cosmiconfig from "cosmiconfig";

const explorer = cosmiconfig("my-app");
const result = await explorer.search(); // 自動(dòng)查找配置文件

推薦理由：

• 支持多種配置格式（JSON/YAML/JS）
• 自動(dòng)向上查找配置文件

結(jié)語(yǔ)

這些庫(kù)可能不如 lodash、axios 知名，但在特定場(chǎng)景下能極大提升開(kāi)發(fā)效率。