前端包管理工具 npm yarn cnpm npx(一)

简介: 前端包管理工具 npm yarn cnpm npx

前言

这篇文章主要和大家分享前端包管理工具,是什么,怎么用和基本原理,通过阅读,我想至少能够帮助大家解决一些常见的面试问题。

1.npm 和 yarn 区别和联系

2.package.json和 package-lock.json 是干什么的,有什么用

3.npm install 之后发生了什么

4.如何发布一个自己的npm包*

a4e33fc46df8dcf1c3ff3b4db8b0674.png39785d0abc76f6ebc341f70c38c9c8a.png

包管理工具的产生背景

我们通过JavaScript模块化的方式,把代码划分成一个小小的结构,并且封装成一个模块工具。 当我们的同事也想使用这个工具的时候,可以手动导入给他 当我们想分享给更多人的使用,该怎么做呢?一般来说方式有两种。

方式一


上传到github,其他人通过github下载我们的代码,手动引用

* 需要手动引用,手动管理依赖,手动控制风险较大。
* 当版本更新或者删除依赖时,需要重复上面的操作。

根据墨菲定律,凡是可能出问题的地方,就必出发生问题,这种方式是有效的方法,但觉得不是一个方便的方法,就像我们经常所说的,理论上可行,实际开发中不可用

方式二


使用专业的包管理工具来管理我们代码

  • 我们通过工具将代码发布到特定的位置
  • 其他人直接通过工具来安装,升级,删除我们的工具代码包

这也就是我今天要和大家分享的包管理工具

包管理工具npm

概述


npm 全称Node Package Manager node包管理工具,现在已经不仅仅局限于node包,在前端项目里我们也使用他来管理依赖包,比如vue,vue-router,vuex,express,koa,react,axios,babel,webpack。

npm 属于node的管理工具,当我们下载安装node的时候,就会一起安装npm

npm 管理的包可以在npm 官网www.npmjs.org/

我们发布自己的包其实是发布到registry上面的,当我们安装一个包时其实是从registry上面下载的包registry.npmjs.org

npm 配置文件


package.json文件

现在前端开发有大量的包,那么我们用npm管理管理这么多包,无论前端项目vue,react,还是后端项目express,koa,egg,都会一个配置文件,这个配置文件记录这项目的名称,版本号,项目描述,项目依赖库和依赖库的版本号。

可以使用npm init 生成一个package.json 文件

也可以通过脚手架创建一个项目,帮助我们自动生成package.json

配置文件图示

b78814997bbb0ab89c0765789b19d0e.png

88dd8b2b86b4ab0ce6e6333f5ee690b.png



相关文章
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1849 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
3030 5
|
存储 资源调度 JavaScript
一文带你了解PNPM以及 npm,yarn,pnpm区别
一文带你了解PNPM以及 npm,yarn,pnpm区别
1543 9
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
767 3
npm学习一:npm 包管理工具 学习、使用。
|
JavaScript
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
1640 2
|
缓存 前端开发 JavaScript
前端优化之路:打包文件拆包、增加哈希值
前面对项目打包做了优化处理,但是还不够完美,有两点可继续优化。
|
缓存 资源调度 JavaScript
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
2980 0
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
1813 0
|
前端开发 JavaScript
前端 JS 经典:Vite 分包配置
前端 JS 经典:Vite 分包配置
691 0

热门文章

最新文章

推荐镜像

更多
  • NPM