前端入门之npm与yarn

一、npm简介

npm 全称为 Node Package Manager，是一个基于 Node.js 的包管理器，也是整个 Node.js 社区最流行、支持的第三方模块最多的包管理器。npm的初衷：JavaScript开发人员更容易分享和重用代码。

0. nodejs = ECMAScript + 核心模块
1. 自己遵循 commonjs 规范写出模块，如果写的是功能模块（日期处理datejs，数字处理numberjs）。如果可以把这些模块分享出来，以后谁要进行相关功能开发的时候，直接拿开发好的模块使用即可，没必要自己在开发。在互联网有一个网站专门收集这样的工具包。www.npmjs.cn/。
2. 如果我们要使用这个网站里面的包，则我们需要使用一个功能，叫做 npm。

官网：www.npmjs.cn/

www.npmjs.com/package/md5

npm可以用来：

• 允许用户获取第三方包并使用
• 允许用户将自己编写的包或命令行程序进行发布分享

npm安装：

npm不需要单独安装。在安装 Node 的时候，会连带一起安装npm。

执行下面的命令可以用来查看本地安装的 npm 的版本号。

npm -v
复制代码

如果想升级 npm ，可以这样(仅做了解，很少用)

npm install npm --global
复制代码

二、npm体验

以安装和使用md5模块为例：

1、项目目录下，执行命令 npm init，目录下会多一个package.json文件(这个文件1、记录项目相关信息，如项目名称，项目版本2、后期会记录项目中使用的第三方模块)

2、项目目录下，执行命令 npm install md5，这时候就会开始联网下载md5这个包，下载过程需要耐心等待，等待时间视网速而定。

3、看见以下代码表示下载完成：

下载完后：本地项目目录下多了一个node_modules文件夹，我们刚才所下载的md5包及其相关依赖包都在这个文件夹里面了。以后我们开发中需要下载其他包，都会在下载在这个文件夹中。

4、下载完就可以在项目中去导入然后使用了：

var md5 = require('md5');
console.log(md5("12345789"));
复制代码

运行就会得到一个加密字符串。

三、nodemon包的使用

我们前面使用node的http模块书写过web服务器，但是每次改写一点代码都需要重启服务器，开发不是很方便。nodemon可以监听代码的改动自动更新，不需要重启服务器程序就可以看效果。

文档：www.npmjs.com/package/nod…

下载：npm install -g nodemon

说明： -g 表示安装在全局， 这种安装方式不同于前面的安装，它只需要安装一次，就能一直使用。安装的时候会有一个专门的安装目录（安装完成会有提示安装位置，如果忘记了，可以通过npm root -g命令查看安装在哪里）

安装成功，项目目录下，通过命令nodemon 11-http模块.js启动服务器即可。

四、yarn安装与使用

Yarn 是于 2016 年 10 月 由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，旨在取代 npm 这种包管理工具。

官网： yarnpkg.com/en/docs

中文参考链接： yarn.bootcss.com/

特点：

• 速度超快

yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• 超级安全

在执行代码之前，yarn 会通过算法校验每个安装包的完整性。

• 超级可靠

使用详细、简洁的锁文件格式和明确的安装算法，yarn 能够保证在不同系统上无差异的工作。

安装:

管理员模式运行cmd ：npm install -g yarn
常用命令：

yarn init -y

yarn add md5

yarn add nzh

npm i yarn

yarn 全局安装后，命令不生效

背景：

• 执行 yarn global add @vue/cli 后，重启 bash......， vue 命令依然不生效
• 而 npm 全局安装（npm install -g @vue/cli）后，命令生效

解决办法：

1.执行如下命令，得出 yarn 全局安装的命令所处的安装目录

yarn global bin 
复制代码

2.复制安装目录至电脑的环境变量中

3.重新启动终端，发现全局命令行可以生效了