10个npm工具包

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

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

npm install dayjs

import dayjs from 'dayjs';


console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); 


const nextWeek = dayjs().add(7, 'day').format('dddd');
console.log(`下周今天是: ${nextWeek}`); 


console.log(dayjs('2025-06-10').fromNow()); 

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])); 


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

3. jsonwebtoken - 身份认证

npm install jsonwebtoken

import jwt from 'jsonwebtoken';


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


jwt.verify(token, 'YOUR_SECRET_KEY', (err, decoded) => {
  if (err) return console.error('验证失败');
  console.log(decoded); 
});

4. uuid - 唯一标识符

npm install uuid

import { v4 as uuidv4 } from 'uuid';


const sessionId = uuidv4();
console.log(`会话ID: ${sessionId}`); 


localStorage.setItem('deviceId', uuidv4());

5. validator - 数据验证

npm install validator

import validator from 'validator';


const email = '[email protected]';
console.log(validator.isEmail(email)); 
console.log(validator.isMobilePhone('13800138000', 'zh-CN')); 


const userInput = '<script>alert(1)</script>';
console.log(validator.escape(userInput)); 

6. qs - 查询参数处理

npm install qs

import qs from 'qs';


const params = { category: 'tech', page: 2, tags: ['js', 'node'] };
console.log(qs.stringify(params)); 


const url = '?name=Zhifou&skills=react&skills=vue';
console.log(qs.parse(url.substring(1))); 

7. date-fns - 日期函数库

npm install date-fns

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


console.log(format(new Date(), 'yyyy年MM月dd日')); 


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)); 
})();

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 }
];


const names = R.compose(
  R.map(R.prop('name')),
  R.filter(R.lt(R.__, 30))
)(users);

console.log(names); 

个人建议：

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