只会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/
相关推荐
张元清6 小时前
useMediaQuery:React 响应式设计完全指南
前端·javascript·面试
小金鱼Y6 小时前
一文吃透 JavaScript 防抖:从原理到实战,让你的页面不再 “手抖”
前端·javascript·面试
Z兽兽6 小时前
React 18 开发环境下useEffect 会执行两次,原因分析及解决方案
前端·react.js·前端框架
紫_龙7 小时前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
前端·vue.js·typescript
树上有只程序猿7 小时前
这波低代码热,能维持多久
前端
姓王名礼7 小时前
这是一个完整的全栈交付包,包含Vue3 前端交互界面(集成数字人视频流、ECharts 图表、语音对话)和Docker Compose 一键部署脚本。
前端·docker·echarts
嵌入式-老费7 小时前
vivado hls的应用(axis接口)
前端·webpack·node.js
孟陬7 小时前
国外技术周刊第 2 期 — 本周热门 🔥 YouTube 视频 TED 演讲 AI 如何能够拯救(而非摧毁)教育
前端·后端·程序员
小飞大王6667 小时前
从零手写 React:深度解析 Fiber 架构与 Hooks 实现
前端·react.js·架构
不甜情歌7 小时前
JS 异步:Event-Loop+async/await
前端