npm内部机制与核心原理

这篇具有很好参考价值的文章主要介绍了npm内部机制与核心原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

npm 的核心目标:
Bring the best of open source to you, your team and your company.
npm 最重要的任务是安装和维护开源库。

npm 安装机制与背后思想

npm 的安装机制非常值得探究。Ruby 的 Gem,Python 的 pip 都是全局安装机制,但是 npm 的安装机制秉承了不同的设计哲学。

它会优先安装依赖包到当前目录,使得不同应用项目的依赖各成体系,同时还能减轻包作者的 API 兼容性压力,但这样的缺陷也很明显:如果项目 A 和项目 B 都依赖的公共库 C,那么 C 一般会在项目A和项目B中各被安装一次。

当然,对于一些工具模块,比如 supervisor 和 gulp,仍然可以使用全局安装模式,这样方便注册 path 变量,利用我们在任何地方直接使用 supervisor、gulp 命令。不过,一般建议不同项目维护自己局部的 gulp 开发工具以适配不同的项目需求。

下面的流程图体现了 npm 的安装机制:
npm内部机制与核心原理,前端工程化构建依赖树时,当前依赖项目无论是直接依赖还是子依赖,我们都应该遵循扁平化原则优先将其放置在 node_modules 根目录下。在这个过程中,遇到相同模块应先判断已放置在依赖树中的模块版本是否符合对新模块版本的要求,如果符合就跳过,不符合则在当前模块的 node_modules 下放置该模块。

npm 缓存机制

对于一个依赖包的同一版本进行本地化缓存,这是当代依赖包管理工具的常见设计。使用时要先执行以下命令:

npm config get cache
// C:\Users\xxxxxx\AppData\Local\npm-cache

cd 命令进入缓存目录可以看到 _cacache 文件夹。在 npm v5 版本之后,缓存数据均放在根目录的 _cacache 中npm内部机制与核心原理,前端工程化
content-v2: 存放一些二进制文件。为了使这些二进制文件可读,将文件的扩展名改为 .tgz,然后进行解压,得到的结果其实就是npm包资源。
index-v5:存放一些描述性文件,事实上就是 content-v2 中文件的索引。
tmp:临时文件

这些缓存是如何被存储并利用的呢?

这就和 npm install机 制联系在一起了。当 npm install 执行时,会通过 pacote 将相应的包资源解压在对应的 node_modules 下面。npm 下载依赖时,会先将依赖下载到缓存中,再将其解压到项目的 node_modules 下。pacote 依赖 npm-registry-fetch 来下载包资源,npm-registry-fetch 可以通过设置 cache 属性在给定的路径下根据 IETF RFC 7234 生成缓存数据。

接着,在每次安装资源时,根据 package-lock.json 中存储的 integrity、version、name 信息生成一个唯一的 key,这个 key 能对应到 index-v5 下的缓存记录。如果发现有缓存资源,就会找到 tar 包的 hash 值,根据 hash 值找到缓存的包,并再次通过 pacote 将对应的二进制文件解压到相应的项目 node_modules 下,省去了网络下载资源的时间。

npm 不完全指南

自定义 npm init

npm 支持自定义 npm init,快速创建一个符合自己需求的自定义项目。npm init 命令本身并不复杂,它的功能其实就是调用Shell 脚本输出一个初始化的 package.json 文件。相应地,我们要自定义 npm init 命令,就是写一个 Node.js 脚本,它的 module.exports 即为 package.json 配置内容。

为了实现更加灵活的自定义功能,我们可以使用 prompt() 方法,获取用户输入内容:

const desc = prompt('请输入项目描述', '描述...')
module.exports = {
    key: 'value',
    name: prompt('name?', process.cwd().split('/').pop()),
    version: prompt('version?', '0.1.1'),
    description: desc,
    main: 'index.js',
    repository: prompt('github repository url', '', function() {
        if (url) {
            run('touch README.md');
            run('git init');
            run('git add README.md');
            run('git commit -m "first commit"');
            run(`git remote add origin ${url}`);
            run('git push -u origin master');
        }
        return url
    })
}

假设该脚本名为 .npm-init.js,执行以下命令来确保 npm init 所对应的脚本指向正确的文件

npm config set init-module ~\.npm-init.js

我们也可以通过配置 npm init 默认字段来自定义 npm init 内容:

npm config set init.author.name "Lucas"
npm config set init.author.email "xxx.com"
npm config set init.author.url "xxx.com"
npm config set init.license "MIT"
npx 的作用

npx 在 npm v5.2 版本中被引入,解决了使用 npm 时面临的快速开发、调试,以及在项目内使用全局模块的痛点。

在传统 npm 模式下,如果需要使用代码检测工具 ESLint,就要先进行安装,命令如下:

npm install eslint --save-dev

然后在项目根目录下执行命令,或通过项目脚本和 package.json 的 npm scripts 字段调用 ESLint。

./node_modules/.bin/eslint --init
./node_modules/.bin/eslint yourfile.js

而使用 npx 就简单多了:

npx eslint --init
npx eslint yourfile.js

npx 可以直接运行 node_modules/.bin 文件夹下的文件。npx 可以自动去 node_modules/.bin 路径和环境变量 $PATH 里面检查命令是否存在,而不需要再在 package.json 中定义相关的 script。

npx 另一个更实用的特点是,它在执行模块时会优先安装依赖,但是在安装成功后便删除此依赖,避免了全局安装带来的问题。

npm 多源镜像和企业级部署私服原理

npm 中的源(regsitry) 其实就是一个查询服务。我们可以通过 npm config 命令来设置安装源或某个作用范围域对应的安装源,很多企业也会搭建自己的 npm 源。我们可以通过 npm-preinstall 的钩子和 npm 脚本,在安装公共依赖前自动切换源。文章来源地址https://www.toymoban.com/news/detail-855742.html

"scripts": {
  "preinstall": "node ./bin/preinstall.js"
}
// 其中 preinstall.js 脚本的逻辑是通过 Node.js 执行 npm config set 命令
require(' child_process').exec('npm config get registry', function(error, stout, stderr) {
  if (!stdout.toString().match(/registry\.x\/com/)) {
    exec('npm config set @xscope:registry https://xxx.com/npm/')
  }
})

到了这里,关于npm内部机制与核心原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli

    希望我们每个人都能找到属于自己的花期,不急不躁,静等风来。 今天打算用 Docusaurus 开始搭建自己的知识库,之前早已有此想法,遗憾的是没有坚持下来。 这次借助这个机会,也计划将自己【每天学习一点点】系列整理在自己的知识库中,方便大家查找。 在使用脚手架命

    2024年02月22日
    浏览(63)
  • 【前端工程化面试题】webpack proxy的工作原理,为什么能解决跨域问题

    在 webpack 的配置文件 webpack.config.js 中有一个配置项 devServer 里面有一个属性是 proxy,这里面可以配置代理服务器,解决跨域问题,请参考官网。 一般来说 webpack 的代理就是说的开发服务器 webpack-dev-server。 其实不光是 webpack 其他的打包工具比如是 vite,也有代理的功能,也是

    2024年02月21日
    浏览(55)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(76)
  • npm内部机制与核心原理

    npm 的核心目标: Bring the best of open source to you, your team and your company. npm 最重要的任务是安装和维护开源库。 npm 安装机制与背后思想 npm 的安装机制非常值得探究。Ruby 的 Gem,Python 的 pip 都是全局安装机制,但是 npm 的安装机制秉承了不同的设计哲学。 它会优先安装依赖包到当

    2024年04月22日
    浏览(21)
  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(96)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(92)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(71)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(78)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(63)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包