前言

  前端开发逐渐工程化,npm作为我们的依赖管理工具起到十分重要的作用,本文就来总结一下 npm 和 yarn 相关知识点。

正文

  1、什么是npm

  (1)node的包管理器(node package manager),是node.js 默认的、以js编写的软件包管理器。

  (2)npm相当于一个云代码仓库,相当于我们在开发中复制别人的代码,npm是收集了这么多代码,管理起来。

  (3)各个包之间的相互依赖npm帮我们管理,不需要我们单独去管理。

  (4)开发中我们想用jquery的包、bootstrap的包,没有npm之前我们需要单独去下载,引入,有了npm之后,我们只需要npm的一条指令,并且可以控制我们需要的对应的版本。

  2、npm的安装

  npm是node的默认的软件包管理系统,安装node完毕之后,会默认安装npm。

  npm 本身也是基于node.js 开发的软件。

  下载node:网站(https://nodejs.org/zh-cn/),检测是否安装成功,需要在cmd命令框中输入命令。

查看node是否安装成功             node -v
查看npm是否安装成功 npm -v
全局下载依赖包jquery npm install jquery -g
查看当前npm下载包来至于服务器 npm config get registry
由于国外服务访问慢,可以设置淘宝镜像提升下载依赖的速度,之后就可以使用cnpm(gzip压缩支持):
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用nrm工具切换淘宝源  npx nrm use taobao
使用nrm工具切换官方源   npx nrm use npm

  3、npm的基本使用

查看当前项目中所装的依赖          npm list
查看某一个依赖的版本 npm list vue // 查看vue的依赖版本
安装指定版本的依赖 npm install juery@3.0.0 // 安装3.0.0本版的依赖到当前项目
更行指定依赖到最新版本 npm update jquery // 更新jquery到最新版本,旧项目慎用
更行npm的版本  npm install npm@6.14.5 // 更新npm到指定版本
-g // 代表全局安装
-S  // 或者--save 会在package.json文件的dependencies节点中写入依赖,表示运行时依赖
-S -D //或者--save --dev 会在package.json文件的devDependencies 节点中写入依赖,表示开发时依赖
     // vue、vue-router 这些包在发布后生产环境还需要用,为运行时依赖,gulp,压缩css/js模块,babel的包在在项目部署后不使用,为开发时依赖。 清空缓存 npm cache clear // 清空npm本地缓存,用于对付使用相同版本号发布新版本代码的人
撤销依赖版本 npm unpublish@ // 可以撤销发布自己发布的某个依赖版本

  其他命令请到npm官网(https://www.npmjs.com/)查看使用

  4、package.json详解

  进入文件夹,cmd命令输入" npm init "初始化生成package.json文件。

  之后就会生成package.json文件,里面的内容就是上一步录入的信息。

  执行npm install jquery -s 命令就会装入一个jquery的运行时依赖

  同时package.json中dependencies节点就会写入改依赖名

  上面的图片中,jquery对应的版本前面有 "^" 符号表示后两位会更新到最新版本,如果替换为 “~”破浪线表示最后一位更新到最新版本,若没有符号,表示依赖只能是指定的版本。

  此时,如果删除掉node_modules文件夹下的jquery文件,将删除了依赖,此时package.json的dependencies节点不变,此时重新执行npm install 命令,将会重新下载安装jquery文件到node_modules文件夹下,这就是为什么我们在拿到一个半成品项目的时候,需要首先执行npm install 命令,别人的代码中不会有这些依赖,只是将依赖信息放在了package.json文件中,我们执行npm install 的时候,npm包管理工具会去查找该文件安装对应的依赖到本地环境。

  5、npm安装包的使用

  有了前面的了解,我们可以使用命令行使用npm下载和更新包,但是没有webpack 之前搜寻整个node_modules目录来定位每个包的路径再手动添加到我们的html代码中十分不便,相当于把依赖当成一个资源的目录了,类似于cdn脚本引入,这样十分不方便,因此产生了webpack。这里需要了解模块和包的概念(commonJS、require、import)。

  6、yarn

“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了:

  • npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。

  • 同一个项目,安装的时候无法保持一致性。

  • 队列执行每一个安装包。

安装yarn                npm install -g yarn
yarn 淘宝源安装(两条命令) yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
初始化项目   yarn init
添加一个依赖包 yarn add [package]@[version]
更新一个依赖包 yarn upgrade [package]@[version]
删除一个依赖包 yarn remove [package]
安装所有的依赖包   yarn install
列出每个缓存的包   yarn cache ls
清除本地缓存  yarn cache clean

  优点:速度快、安装版本统一、加入多个注册来源以及更多的语义化。

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

npm 和 yarn 前端包管理工具的


扫描二维码,在手机上阅读!