包管理工具详解npm、yarn、cnpm、npx、pnpm

这篇具有很好参考价值的文章主要介绍了包管理工具详解npm、yarn、cnpm、npx、pnpm。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录:

1 npm包管理工具

2 package配置文件

3 npm install原理

4 yarn、cnpm、npx

5 发布自己的开发包

6 pnpm使用和原理

当我们使用npm install xxxx 的时候会添加一个node_module和2个json文件:

包管理工具详解npm、yarn、cnpm、npx、pnpm     包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json是配置信息文件,

 这个配置文件会记录着你项目的名称版本号项目描述等;

 也会记录着你项目所依赖的其他库的信息依赖库的版本号

包管理工具详解npm、yarn、cnpm、npx、pnpm包管理工具详解npm、yarn、cnpm、npx、pnpm

这个文件我们一般不直接自己创建,一般是通过dos目录输入 npm init来手动配置,还可以通过 npm init -y 来快速生成默认的配置信息文件。通过脚手架创建的项目也是自带了package.json文件的。

包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json文件属性main

是指向模块的入口文件的,很多文件入口文件是index.js,在node执行require('文件名称')不加inde.js也自动会找到index.js。但是如果入口文件不叫index.js,那require('文件名称')就找不到入口文件了,于是,如果你这个模块文件夹有package.json文件的话,可以配置main来指定模块入口文件,以后其他地方使用require('文件名称')就不会出现找不到入口文件的情况了。

包管理工具详解npm、yarn、cnpm、npx、pnpm

 比如dayjs的入口文件就不是index.js

包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json文件属性script

可以用来简化执行命令的,比如本来需要执行命令node xxx.js  ,通过使用script事先写好的命令,我们就可以直接写成npm run  xxx 就可以简化了。

包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json文件属性dependencies:

dependencies是用来记录开发环境和生产环境都需要使用的模块的

当项目要发送给别人使用的时候,一般会把项目的node_modules文件夹删除掉来减小项目的内存大小。但是项目又依赖这些模块,别人只需要通过命令  npm install  自动下载这些依赖的模块就好了。

如果是开发时候才需要用到的模块,我们安装的时候是通过npm install xxx  --save-dev   或者 npm install xxx  -D   来存放到devDependencies里的。

命令npm install xxx  --save和npm install xxx  是会记录到dependencies里的

包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json文件属性devDependencies属性:

devDependencies和dependencies的企业别就是dependencies是用来记录开发环境和生产环境都需要使用的模块的;而devDependencies主要是用来记录开发环境下需要的模块的。

比如下图的vue和dayjs就会放到dependencies里,webpack和babel等就是放到devDependencies里。

如果是开发时候才需要用到的模块,我们安装的时候是通过npm install xxx  --save-dev  或者 npm install xxx  -D 来存放到devDependencies里的。

命令npm install xxx  --save和npm install xxx  是会记录到dependencies里的

包管理工具详解npm、yarn、cnpm、npx、pnpm

包管理工具详解npm、yarn、cnpm、npx、pnpm

包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

package.json文件属性peerDependencies属性属性:

有些模块必须需要其他模块作为前提才能使用,这个时候在那个模块的packag.json文件里面的peerDependencies会有标注。比如element-plus使用的前提就是需要有vue。

包管理工具详解npm、yarn、cnpm、npx、pnpm

依赖的版本管理:

包管理工具详解npm、yarn、cnpm、npx、pnpm

 ​​​​包管理工具详解npm、yarn、cnpm、npx、pnpm

关于npm install 命令细节:

项目(局部)安装(local install)是进入到项目或者文件夹内时使用npm install xxx 来安装的。

全局安装(global install)是会把安装的内容放到一个由node管理的目录,这个目录有在电脑的环境变量里面,同时会在电脑的环境变量里面有这样的命令可以执行。比如安装webpack可以通过npm install webpack -g 。此后可以在电脑的任何文件夹内使用:

webpack xxx.js  的命令。

注意:不是所有包都需要全局安装,一般都是工具包才需要全局安装(yarn、webpack等)。

基本知识看后面ppt内容

项目在开发的时候,安装包的时候,命令要使用正确:

包管理工具详解npm、yarn、cnpm、npx、pnpm

首先是npm 下载重复的包的时候,会查看之前是否有缓存该包。 

package.json里面记录的都是比较宽松的版本。比如,在项目使用的包在自己手里可能是0.25.3的版本,但是项目给其他人的时候,通过npm install 安装依赖之后可能会是2.25.3的版本。这个时候就可能出现不能正常使用某些功能了。所以,我们需要使用package-lock.json文件来确定死每一个包版本。这些包我们一般不手动管理,全靠他们自动化生成。

包管理工具详解npm、yarn、cnpm、npx、pnpm

下图是npm install xxx 的工作流程:

包管理工具详解npm、yarn、cnpm、npx、pnpm

npm其他命令:

包管理工具详解npm、yarn、cnpm、npx、pnpm

想要使用yard就从npm下载:

npm install yard -g

下载包使用npm的时候我们可以设置默认链接淘宝镜像源来下载包,有个缺点就npm以后默认去淘宝镜像源去下载包了,然后我们可以在下载一个cnpm(npm的镜像),然后修改cnpm下载包的路径为淘宝镜像源就好了。

包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

npx的目的的早期为了局部使用node_modules里面的webpack的,如果不使用npx的话用于打包项目的webpack会从电脑环境变量里面获取。(存在的问题是局部的webpack可能和全局的webpack版本可能不一样)

在npm发布自己的包:

把你的项目发送到npm的包管理库里面的方法是

(1)在npm官网先注册一个账号

(2)在你的项目根目录的dos命令提示符登录npm账号

npm login

(3)在项目根目录创建package.json文件

npm init -y

(4)发送项目文件

npm publish

包管理工具详解npm、yarn、cnpm、npx、pnpm最好是有一个index来统一导出某些功能,package.json也是比较重要。

如何正常使用下载好的包?(指的是使用node xxx.js命令直接执行某个js文件的问题)(这种情况是在原生的文件里面想要使用,不是在vue和react脚手架创建的项目里面使用)

报错问题:

上面步骤我们上传的包在其他js文件里面需要使用的时候,通过以下两种方式会报错:

导出的文件是es6的模块化

包管理工具详解npm、yarn、cnpm、npx、pnpm

 导入的方式是commonjs,然后想要使用node main.js (报错)

包管理工具详解npm、yarn、cnpm、npx、pnpm

 想要使用es6来导入,然后继续执行node main.js时报错

包管理工具详解npm、yarn、cnpm、npx、pnpm

解决办法:

(1)可以通过浏览器加载

(2)使用webpack来加载

在项目根目录npm下载webpack

npm install webpack webpack-cli -D

然后在项目根目录执行npx webpack 打包出一个dist的文件夹

npx webpack

最后一步是创建一个一个html文件,使用script标签把dist目录下的main.js文件导入,点击打开html文件就能正常使用了。

包管理工具详解npm、yarn、cnpm、npx、pnpm

如何更新上传的项目的版本?

在package.js文件中更改版本号,然后再登录npm,通过npm publish来上传就好了,

pnpm为我们解决了处理以往创建的很多的项目(节省磁盘)。

硬连接和软连接:

硬连接可以实现多个文件对应的数据是同一个文件,被指向的那个文件修改之后,指向这个文件的所有文件都会改变。就像编程里面的对象类型。

软连接可以连接为快捷方式,这个只是知道原本文件的位置去打开那个文件,一旦那个文件改变名称或者移动删除就打不开了。

pnpm实现的是多个项目如果下载的同一个包在磁盘里面存在,则直接建立硬连接,就不再下载一个在磁盘中了,所以节省磁盘。而其他的包管理器则相反,每个项目下载相同的包的时候就会再次下载包,磁盘中会有重复的包。

包管理工具详解npm、yarn、cnpm、npx、pnpm

包管理工具详解npm、yarn、cnpm、npx、pnpm

 

包管理工具详解npm、yarn、cnpm、npx、pnpm

 

pnpm下载的包都是非扁平化的。

其他的包管理器下载一个包的时候可能会下载多个依赖包,并且这些依赖包只会放在下载的那个包里面。当我们确实需要某个包的时候,如果在上述的包删除时,依赖包也会被删除。

pnpm下载一个包的时候,依赖包也会放到node_modules文件夹里面,而不是放到那个包底下。

如何使用pnpm?

下载pnpm

npm install -g pnpm

pnpm也可以创建一个package.json文件

pnpm init

安装一个包

包管理工具详解npm、yarn、cnpm、npx、pnpm

 

下载后的包存放在哪里了?

下图的axios包的又边有个右箭头(包管理工具详解npm、yarn、cnpm、npx、pnpm这个文件是软连接的,相当于快捷键指向真实文件)

包管理工具详解npm、yarn、cnpm、npx、pnpm

 

真正的axios包放在了.pnpm文件里面的axios\node_modules里面了

包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 

包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 

1

包管理工具详解npm、yarn、cnpm、npx、pnpm

包管理工具详解npm、yarn、cnpm、npx、pnpm 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

包管理工具详解npm、yarn、cnpm、npx、pnpm 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm

 包管理工具详解npm、yarn、cnpm、npx、pnpm文章来源地址https://www.toymoban.com/news/detail-462186.html

到了这里,关于包管理工具详解npm、yarn、cnpm、npx、pnpm的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 记录--npm, npx, cnpm, yarn, pnpm梭哈

    依赖管理解决了在软件开发过程中管理和协调各种依赖项的问题,简化了开发流程,提高了项目的可靠性、可维护性和可重复性。它们帮助开发人员更高效地管理项目的依赖关系,减少了潜在的错误和冲突,并提供了更好的开发体验。 在 JavaScript 生态系统中,有多种工具可用

    2024年01月22日
    浏览(65)
  • 前端命令npm 、 cnpm、 pnpm、yarn 、 npx、nvm的区别

    大名鼎鼎的 npm (Node Package Manager)是随同NodeJS一起安装的包管理工具,NPM本身也是Node.js的一个模块。 npm的含义有两层: npm服务器,npm服务器网址为https://www.npmjs.org,npm是 Node 包的标准发布平台,用于 Node 包的发布、传播; npm包管理器,指在命令行窗口或终端使用npm命令来管理

    2024年02月11日
    浏览(51)
  • 包管理工具那么多,怎么选?npm、yarn 和 pnpm 三者比较及使用详解!

    在 Vue 项目中,我们需要使用许多第三方依赖库,如 Vue Router、Vuex、Axios、Element UI 等等。这些依赖库通常以 NPM 包的形式提供,而且在使用时需要进行版本管理。因此,我们需要使用一个包管理工具来统一管理这些依赖库,避免版本冲突和管理繁琐。 常见的 Vue 项目包管理工

    2024年02月07日
    浏览(59)
  • npx和npm有什么区别,包管理器yarn的使用方法,node的版本管理工具nvm使用方法

    一、npx介绍及使用 平时安装node模块的时候,经常使用的命令是npm。其实还有另外一个命令,叫做npx。网上的说法都是:npx是npm命令的升级版本,功能非常强大。 1、npx 是什么 npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装

    2024年01月16日
    浏览(54)
  • 前端包管理器的工具,npm和Yarn以及pnpm是最常用的

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 前端包管理器是用于管理前端项目依赖项(如库、框架和工具)的工具。它们有助于确保项目的依赖项始终保持最新、可维护和可复制。以下是一些常用的前

    2024年02月07日
    浏览(52)
  • “yarn“、“npm“、“cnpm“和“pnpm“的区别

    npm(Node Package Manager)是Node.js的默认包管理器。它是一个全球最大的开源软件注册表,拥有数量庞大的包供开发者使用。npm具有广泛的生态系统和大量的社区支持。 软件包数量庞大,几乎包含了所有常见的开源库和工具。 社区活跃,有大量的文档、教程和支持。 可以方便地

    2024年02月11日
    浏览(47)
  • 统一使用某一个包管理工具,比如yarn pnpm

    原因:前端每个人的习性不一样,有人用npm 有人用yarn等包管理工具,混合下载插件容易出bug,就用个小工具锁住就行了,只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 改为pnpm的例子,就把yarn改为pnpm就可以了 if (!/ pnpm /.test(process.env.npm_execpath || \\\'\\\')) { 在scripts下添

    2024年02月10日
    浏览(48)
  • npm yarn pnpm npx nvm 命令怎么区分怎么用

    参数 - install:安装一个或多个包。例如:npm install 。 uninstall:卸载一个包。例如:npm uninstall 。 update:更新一个或多个包的版本。例如:npm update 。 list:列出当前项目中已安装的包。例如:npm list。 init:初始化一个新的 npm 项目。例如:npm init。 run:运行指定的 npm 脚本。

    2024年02月11日
    浏览(51)
  • 包管理工具npm和Yarn的区别,我们该如何选择?

    好家伙,学习新工具    关于npm我们已经知道了,这是我们项目的包管理器, 我们现在用的无比顺手的工具,都是在无数的竞争中杀出来的,他们淘汰了无数的产品   首先,倘若我们不使用npm,那么我们应该如何去新建一个前端项目? 纯手工,把我们项目需要的项目一个个下载到我们的

    2024年02月17日
    浏览(40)
  • 【前端笔记】前端包管理工具和构建打包工具介绍之npm、yarn、webpack、vite

    NPM(Node Package Manager)是node包管理器,是node.js默认采用的软件包管理系统,使用JavaScript语言编写。包管理可以理解为依赖管理,有一个npm包管理仓库,当我们执行npm命令的时候,就可以直接从npm仓库中下载对应的依赖包,类似于后端开发中的POM。 node.js中就已经安装了NPM,所

    2024年02月02日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包