前端工程化基建学习(1)学习了解npm的核心原理和内部机制

前言

        首先写这篇文章是为了个人学习以及回顾的时候可以自己看的,也会参考到其他大牛的文章,不作盈利目的,如涉及侵权麻烦联系我删除,如有雷同请谅解,大家一同学习。

一、从内部机制和核心原理了解npm
1.1 、npm 的安装机制和背后思想

1、npm install 执行之后,首先,检查并获取 npm 配置
2、检查项目中是否有 package-lock.json 文件
  1.  若有: 检查 package-lock.json 和 package.json 中声明的依赖是否一致:一致就直接使用package-lock.json 中的信息,从缓存或网络资源中加载依赖;不一致,则依据npm的版本进行处理
  2. 若无:则根据 package.json 递归构建依赖树,按照构建好的依赖树下载完整的依赖资源,在下载时就会检查是否存在相关资源缓存:存在缓存,就会将缓存内容解压到node_modules 中;不存在缓存,就从npm远程仓库下载包,并会检验包的完整性,随后添加到缓存,解压到node_modules 中生成package-lock.json。

3、最后生成 package-lock.json
1.2 、package-lock.json的作用

它的作用锁定安装时的包的版本号及包的依赖的版本号, 以保证其他所有人人在使用 ​​npm install​​ 时下载的依赖包都是一致的。

dependencies 是一个对象,对象和 node_modules 中的包结构一一对应,对象的 key 为包名称,值为包的一些描述信息:

  1. version: 包版本这个包当前安装在 node_modules 中的版本
  2. resolved: 包具体的安装来源,通常是npm,也有是私有源
  3. integrity: 包 hash 值,来判断安装的依赖包是否被改动过、是否已失效源
  4. requires: 对应子依赖的依赖,与子依赖的 package.json 中 dependencies的依赖项相同
  5. dependencies: 存储安装在子依赖 node_modules 中的依赖包。

这里注意,并不是所有的子依赖都有 dependencies 属性,只有子依赖的依赖和当前已安装在根目录的 node_modules 中的依赖冲突之后,才会有这个属性。

1.3 node_modules 中模块目录结构

npm3.x之前是嵌套结构,那时候如果我们的项目中依赖了公共库 A 和公共库 B,同时公共库 A 也依赖了公共库 B,那公共库 B 会被多次安装

node_modules 的结构和 package.json 结构一一对应,层级结构明显,并且保证了每次安装目录结构都是相同的。但是一个项目中引用的模块非常多,嵌套层级很深这时候就出现:在不同层级的依赖中,可能引用了同一个模块,这样这个模块就存在多个地方。显然不符合编码简洁的思路。

为了解决以上问题,npm3版本进行了改造。把嵌套结构改为扁平结构: 安装模块时,不管其是直接依赖还是子依赖的依赖,优先将其安装在 node_modules 根目录。

参考文章作者:codercao
参考链接:https://juejin.cn/post/7156041372678488072

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端工程化是指通过工具和流程提高前端开发的效率和质量,使得前端开发能够像工程一样进行管理、开发和维护。它包括代码管理、依赖管理、构建工具、自动化测试、部署等方面。 具体来说,前端工程化主要包括以下几个方面: 1. 代码管理:使用版本控制工具(如 Git)来管理代码,以便多人协作开发、追踪代码变更、回滚代码等。 2. 依赖管理:使用包管理工具(如 npm、yarn)来管理项目的依赖,以便于协作开发、自动更新依赖等。 3. 构建工具:使用构建工具(如 Webpack、Gulp、Grunt)来自动化构建、编译、打包和压缩前端代码,以提高开发效率和减少代码体积。 4. 自动化测试:使用自动化测试工具(如 Jest、Mocha、Chai)来进行单元测试、集成测试和端到端测试,以保证代码的质量和稳定性。 5. 部署:使用自动化部署工具(如 Jenkins、Travis CI)来自动化部署代码到服务器、CDN 等环境,以便于快速部署和更新应用程序。 为了学习前端工程化,需要学习一些相关的课程,包括: 1. Git 版本控制:学习 Git 的基本使用方式和工作流程,掌握分支管理、代码合并、代码回滚等操作。 2. npm 和 yarn 包管理:学习如何使用 npm 和 yarn 管理项目的依赖,以及如何发布和维护自己的 npm 包。 3. Webpack 构建工具:学习如何使用 Webpack 进行构建、打包和编译前端代码,以及如何使用插件和 loader 来扩展 Webpack 的功能。 4. Jest 单元测试:学习如何使用 Jest 进行单元测试,包括测试用例编写、测试覆盖率、Mock 等。 5. Jenkins 自动化部署:学习如何使用 Jenkins 进行自动化部署,包括如何配置 Jenkins 服务器、如何设置自动化部署任务、如何与 Git 和 npm 集成等。 总之,前端工程化是现代化前端开发的必备技能之一,需要学习一些相关的课程和工具,以提高前端开发的效率和质量。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值