【包管理工具】npm yarn

menghen113

已于 2023-03-05 14:48:11 修改

阅读量273

点赞数 1

分类专栏：前端学习文章标签： npm node.js yarn

于 2023-03-05 10:07:07 首次发布

本文链接：https://blog.csdn.net/menghen113/article/details/129342815

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频1
视频2

认识NPM

npm(全称 Node Package Manager,即node包管理器)

是node.js 默认的，以 JavaScript编写的软件包管理系统

npm来分享和使用代码已经成了前端的标配

官网：https://www.npmjs.com

安装npm工具

npm是Node.js默认的软件包管理系统

安装完毕node 后，会默认安装好npm

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

下载Node:http://nodejs.cn

在这里插入图片描述

全局安装

在这里插入图片描述

仅在项目中安装

在这里插入图片描述

npm 镜像的设置与查看

搭建环境时通过如下代码将npm设置成淘宝镜像

npm config set registry https://registry.npm.taobao.org --global
设置当前地址（设置为默认地址）

npm config set registry https://registry.npmjs.org/
查看镜像的配置结果

npm config get registry
使用nrm工具切换淘宝源

npx nrm use taobao

NPM的使用

npm -v 通过查看版本，看npm是否安装成功
npm install 使用npm命令安装模块
npm install -g 可以直接在命令行里使用
npm list -g 查看所有全局安装的模块
npm list vue 查看某个模块的版本号
npm -g install npm@5.9.1 (@后跟版本号)这样我们就可以更新npm 版本
npm install moduleName -save # -save 在package文件中的dependencies节点写入依赖，运行时的依赖，发布后，即生产环境下还需要用的模块
npm install moduleName -save-dev# -save-dev 在package文件的devDependencies节点写入依赖，开发时的依赖，里面的模块是开发时用的，发布是用不到它，比如项目中使用的glup,压缩css,js的模块，这些模块在我们项目部署后是不需要的

_package.json

文件生成

在这里插入图片描述

“scripts” (脚本中的命令使用)

在这里插入图片描述

当拷给他人代码（不带bootstrap等包），可以使用 npm install 按照配置文件更新软件包

在这里插入图片描述

"dependencies":{
	"jquery":"^3.5.2"    "^"表式前面的3不变，后面两个数字变，更新到最新 
	"jquery":"~3.5.2"    "~"表示3和5不变，最后的2变，
}

NPM下包的使用

在这里插入图片描述

通过命令行使用 npm 下载和更新包
没有webpack之前搜索整个 node_modules目录来定位每个包的路径再手动添加到我们HTML文件中（是在太不方便了）
大多数编程语言都会提供一个文件导入另一个文件代码的机制，然而 JavaScript 最初设计时并没有这个特性，因为JavaScript 原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所有很长一段事件下来，组织多个文件的 JavaScript 代码就是把每个文件下载下来，变量是全局共享的
CommonJS中很大的一部分便是对模块系统的规范
使用require语句导入包
新的ES6可以使用 import 导入包

ES6 兼容性问题

兼容表：http://kangax.github.io/compat-table/es6/
IE10+,Chrome,FireFox,移动端,NodeJS现在都支持
兼容低版本浏览器
- 在线转换（这种编译会加大页面渲染的时间）
- 提前编译（强烈建议这种方式，不影响浏览器渲染时间）
比较统一的工具方案有 babel,jsx,traceur,es6-shim等。

在线转换：

在这里插入图片描述

提前编译

在这里插入图片描述

Yarn

Yarn 是由 Facebook,Google,Exponent和Tilde联行退出了一个新的JS包管理工具，正如官方文档中写到，Yarn是为了弥补npm 的一些缺陷而出现的，因为NPM5一下会出现一下的问题：

npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules,重新install的时候依旧如此
同一个项目，多人开发是，由于安装的版本不一致出现bug

官网：www.yarnpkg.com

yarn 的安装

下载node.js,使用npm安装
- npm install yarn -g
- 查看版本：yarn --version
安装node.js,下载yarn的安装程序
- 提供一个.msi文件，在运行时将引导您在Windows上安装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的基本使用

yarn init 初始化项目同npm init ,执行输入信息后，会生产package.json文件

yarn install 安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock

yarn add [package] 在当前的项目中添加1一个依赖包，会自动更新到package.json和yarn.lock文件中

yarn add [package]@[version] 安装指定版本，这里值得是主要版本，如果需要精确到小版本，使用-E参数

yarn remove [package]

Yarn的优点

速度快
安装版本统一
更简洁的输出
多注册来源处理
更好的语义化

官网地址：https://yarnpkg.com/en/docs/install

1.安装

npm install yarn -g

2.查看

yarn -h

yarn help COMMAND

yarn -V    查看版本

3.初始化

yarn init

4.添加一个包

yarn add webpack

5.更新一个包

yarn upgrade webpack

6.从本地安装

yarn add tty-browserify --offline

7.查看本地的包

yarn cache ls

8.查看安装在本地的路径

yarn cache dir

9.对本地缓存做强制清除

yarn cache clean

10.拿到一个包的信息

yarn info react

11.添加全局的包

yarn global add webpack

12.yarn的自我更新

yarn self-update

13.分析为什么要安装这个包

yarn why uglify-js