知道这10个npm工具包，开发效率提高好几倍！第2个大家都用过！

有了 npm 之后，前端人员真的是过上好日子了。我们可以直接把别人写好的工具包拿来用，非常的方便。

1. day.js - 轻量日期处理

npm install dayjs

import dayjs from 'dayjs';

// 日期格式化
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // 2025-06-18 18:30:15

// 日期计算
const nextWeek = dayjs().add(7, 'day').format('dddd');
console.log(`下周今天是: ${nextWeek}`); // 下周今天是: 星期三

// 相对时间
console.log(dayjs('2025-06-10').fromNow()); // 8天前

2. lodash - 实用工具库

npm install lodash

import _ from 'lodash';

// 安全获取嵌套属性
const user = { info: { address: { city: null } } };
console.log(_.get(user, 'info.address.city', '杭州')); // 杭州

// 数组去重
console.log(_.uniq([2, 1, 2, 3, 1])); // [2, 1, 3]

// 函数防抖
const resizeHandler = _.debounce(() => {
  console.log('窗口停止调整大小');
}, 300);
window.addEventListener('resize', resizeHandler);

3. jsonwebtoken - 身份认证

npm install jsonwebtoken

import jwt from 'jsonwebtoken';

// 生成token
const token = jwt.sign(
  { userId: '1111', role: 'admin' },
  'YOUR_SECRET_KEY',
  { expiresIn: '2h' }
);

// 验证token
jwt.verify(token, 'YOUR_SECRET_KEY', (err, decoded) => {
  if (err) return console.error('验证失败');
  console.log(decoded); // { userId: '1111', role: 'admin', iat: ..., exp: ... }
});

4. uuid - 唯一标识符

npm install uuid

import { v4 as uuidv4 } from 'uuid';

// 生成唯一ID
const sessionId = uuidv4();
console.log(`会话ID: ${sessionId}`); // 会话ID: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d

// 前端缓存标识
localStorage.setItem('deviceId', uuidv4());

5. validator - 数据验证

npm install validator

import validator from 'validator';

// 表单验证
const email = 'user@qq.com';
console.log(validator.isEmail(email)); // true
console.log(validator.isMobilePhone('13800138000', 'zh-CN')); // true

// XSS防护
const userInput = '<script>alert(1)</script>';
console.log(validator.escape(userInput)); // &lt;script&gt;alert(1)&lt;/script&gt;

6. qs - 查询参数处理

npm install qs

import qs from 'qs';

// 对象转查询字符串
const params = { category: 'tech', page: 2, tags: ['js', 'node'] };
console.log(qs.stringify(params)); // category=tech&page=2&tags[0]=js&tags[1]=node

// 解析URL参数
const url = '?name=Zhifou&skills=react&skills=vue';
console.log(qs.parse(url.substring(1))); // { name: 'Zhifou', skills: ['react', 'vue'] }

7. date-fns - 日期函数库

npm install date-fns

import { format, addMonths, differenceInDays } from 'date-fns';

// 多语言日期格式化
console.log(format(new Date(), 'yyyy年MM月dd日')); // 2025年06月18日

// 日期计算
const nextMonth = addMonths(new Date(), 1);
console.log(`下个月日期: ${format(nextMonth, 'yyyy-MM-dd')}`);

// 日期差值
const start = new Date(2025, 5, 1);
console.log(`距离今天还有: ${differenceInDays(start, new Date())}天`);

8. bcrypt.js - 密码加密

npm install bcryptjs

import bcrypt from 'bcryptjs';

// 密码加密
const hashPassword = async (plainText) => {
  const salt = await bcrypt.genSalt(10);
  return bcrypt.hash(plainText, salt);
};

// 密码验证
const verifyPassword = async (plainText, hash) => {
  return bcrypt.compare(plainText, hash);
};

// 使用示例
(async () => {
  const hash = await hashPassword('mypassword123');
  console.log(await verifyPassword('mypassword123', hash)); // true
})();

9. sharp - 图像处理

npm install sharp

const sharp = require('sharp');

// 图片压缩
sharp('input.jpg')
  .resize(800)  // 限制宽度
  .jpeg({ quality: 80 }) // 质量压缩
  .toFile('output.jpg');

// 生成缩略图
sharp('original.png')
  .resize(200, 200)
  .toFile('thumbnail.png');

10. ramda - 函数式编程

npm install ramda

import R from 'ramda';

// 数据转换
const users = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Sarah', age: 30 }
];

// 获取30岁以下用户名字
const names = R.compose(
  R.map(R.prop('name')),
  R.filter(R.lt(R.__, 30))
)(users);

console.log(names); // ['John']

个人建议：

1. 日期处理：day.js (轻量级日期处理) / date-fns (功能全面的日期处理)
2. 工具库：lodash (主流) / ramda (函数式)
3. 安全相关：bcrypt (加密工具) + jsonwebtoken (token认证)
4. 数据处理：qs (参数处理) + validator (验证)