只会npm install?这5个隐藏技巧让你效率翻倍!

原文链接:mp.weixin.qq.com/s/nijxVWj-E...

最近有个刚学前端的小伙伴问我:"为什么我的node_modules这么大?为什么别人装依赖那么快?npx到底是啥玩意儿?"

相信不少人都跟他一样,对npm的认知还停留在"npm install"阶段。今天我就来分享几个超级实用的npm技巧,帮你摆脱依赖安装的噩梦!

一、package.json里的秘密

先来说说package.json这个文件,它可不仅仅是项目的身份证。

dependencies和devDependencies到底啥区别?

简单说就是:dependencies是项目运行时必须的依赖,比如react、vue这些。devDependencies是开发时才需要的,比如eslint、webpack这些打包工具。

看个例子就明白了:

json 复制代码
{
  "dependencies": {
    "react": "^17.0.2",  // 项目运行必须
    "axios": "^0.21.1"   // 项目运行必须
  },
  "devDependencies": {
    "eslint": "^7.18.0",  // 只有开发时需要
    "webpack": "^5.11.0"  // 只有开发时需要
  }
}

版本号前的^和~有啥讲究?

这个特别重要!~表示允许小版本更新,^允许次版本更新。

举个例子:

  • ~1.2.3:可以更新到1.2.x,但不能到1.3.0
  • ^1.2.3:可以更新到1.x.x,但不能到2.0.0
json 复制代码
{
  "dependencies": {
    "lodash": "~4.17.0",  // 只会更新到4.17.x
    "moment": "^2.29.0"   // 可以更新到2.x.x
  }
}

二、npm install的隐藏技巧

你是不是还在傻傻地等着npm install慢慢下载?试试这两个技巧:

1. 使用npm ci替代npm install

在CI/CD环境或者想要确保依赖一致时,用npm ci比npm install更靠谱:

bash 复制代码
npm ci  # 完全按照package-lock.json安装,速度更快更稳定

2. 离线优先模式

如果你之前安装过相同的依赖,可以这样加速:

bash 复制代码
npm install --prefer-offline  # 优先使用本地缓存

三、npx:不用全局安装也能运行命令

这是我最近发现的神器!以前要全局安装脚手架工具,现在用npx直接运行:

bash 复制代码
# 以前需要先全局安装
npm install -g create-react-app
create-react-app my-app

# 现在直接用npx
npx create-react-app my-app  # 自动下载运行,用完即删

再举个例子,想用webpack但不想全局安装:

bash 复制代码
npx webpack --config webpack.config.js  # 临时使用webpack

四、安全漏洞检查

现在网络安全这么重要,npm也提供了安全检查功能:

bash 复制代码
npm audit  # 检查项目依赖的安全漏洞
npm audit fix  # 自动修复可修复的漏洞

如果发现严重漏洞,最好立即处理。我曾经有个项目就因为依赖的旧版本库有漏洞,差点出大事!

五、其他实用小技巧

清理缓存 有时候安装出问题,可能是缓存作祟:

bash 复制代码
npm cache clean --force  # 清理npm缓存

查看包信息 想了解某个包的信息?不用去官网:

bash 复制代码
npm view react  # 查看react包的详细信息

快速初始化项目 不想一步步回答npm init的问题?

bash 复制代码
npm init -y  # 一键生成默认package.json

实际工作场景示例

假设你要创建一个新的React项目并检查安全:

bash 复制代码
# 1. 创建项目目录
mkdir my-react-app
cd my-react-app

# 2. 快速初始化
npm init -y

# 3. 安装React(生产依赖)
npm install react react-dom

# 4. 安装开发工具(开发依赖)
npm install -D webpack webpack-cli

# 5. 检查安全漏洞
npm audit

# 6. 如果有漏洞就修复
npm audit fix

写在最后

用了这些技巧后,我们团队的依赖安装时间平均减少了40%,再也不用对着node_modules发呆了。

其实工具用的好,真的能省下不少时间。这些技巧都是我踩了无数坑后总结出来的,希望对你也有帮助!

你还有什么好用的npm技巧?欢迎在评论区分享交流~

PS:如果你发现某个依赖安装特别慢,可以试试切换npm源到淘宝镜像,速度会快很多哦!

bash 复制代码
npm config set registry https://registry.npmmirror.com/
相关推荐
崔庆才丨静觅28 分钟前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60611 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了1 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax