夜听城嚣 夜听城嚣
首页
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 前端基建与架构
  • 专题分享

    • Git入门与开发
    • 前端面试题汇总
    • HTML和CSS知识点
  • 项目实践
  • 抓包工具
  • 知识管理
  • 工程部署
  • 团队规范
bug知多少
  • 少年歌行
  • 青年随笔
  • 文海泛舟
  • 此事躬行

    • 项目各工种是如何协作的
    • TBA课程学习
收藏

dwfrost

前端界的小学生
首页
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 前端基建与架构
  • 专题分享

    • Git入门与开发
    • 前端面试题汇总
    • HTML和CSS知识点
  • 项目实践
  • 抓包工具
  • 知识管理
  • 工程部署
  • 团队规范
bug知多少
  • 少年歌行
  • 青年随笔
  • 文海泛舟
  • 此事躬行

    • 项目各工种是如何协作的
    • TBA课程学习
收藏
  • 导读
  • JS包管理工具和原理分析
    • npm机制
      • npm安装机制
      • npm缓存机制
      • 其他npm命令
  • yarn
  • CI环境上的npm优化
  • 对比主流构建工具
  • Vite实现原理
  • core-js和polyfill
  • 梳理babel
  • 前端基建与架构
frost
2022-06-07

JS包管理工具和原理分析

# npm机制

# npm安装机制

  • 优先安装到当前项目目录
  • 构建依赖树时,按照扁平化原则,优先放置在node_modules根目录
  • 注意不同npm版本有不同的处理方式

npm

# npm缓存机制

  • npm会对于同一个依赖包的同一版本进行本地缓存
  • 通过npm config get cache获取npm缓存目录
  • 使用npm cache clean --force清除全局npm依赖缓存

打开_cacache目录,里面有3个目录:content-v2(二进制文件)、index-v5(content-v2文件索引)、tmp。缓存机制如下:

  • npm install时,通过pacote把相应的包解压到node_modules下。
  • pacote下载包之后,在给定的路径下生成缓存数据。
  • 安装时,根据package-lock.json中存储的integrity、version、name信息生成唯一的key。
  • 如果发现有缓存,则会找到tar包的hash,再通过pacote把对应的二进制文件解压到相应的项目node_modules下。
  • 该缓存策略是npm v5才有的。在这之前是另一套缓存机制。

# 其他npm命令

  • npm init: 该命令得到初始化的package.json文件
  • npm link: 高效在本地调试开发的资源包。本质是软链接,做了2件事:
    • 为目标npm模块创建软链接,将其链接到全局node模块安装路径(/usr/local/lib/node_modules/)
    • 为目标npm模块的可执行bin文件创建软链接,将其链接到全局node命令安装路径(/usr/local/bin/)
  • npx: 可以智能识别模块,如果模块存在(node_modules/.bin中的模块),就执行;如果不存在,就临时安装,执行后删除。

nrm: 管理npm镜像源。

nvm: 管理node和npm版本。

.npmrc文件: 优先级从高到低依次为:项目级.npmrc>用户级.npmrc>全局.npmrc>npm内置.npmrc。

#前端笔记
上次更新: 2022/06/08, 11:25:56
导读
yarn

← 导读 yarn→

最近更新
01
提交代码时修改commit消息
04-09
02
如何快速定位bug
02-20
03
云端web项目开发踩坑
08-25
更多文章>
Theme by Vdoing | Copyright © 2021-2025 dwfrost | 粤ICP备2021118995号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×