前端入门之npm与yarn

一、npm简介

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

  1. nodejs = ECMAScript + 核心模块
  2. 自己遵循 commonjs 规范写出模块,如果写的是功能模块(日期处理datejs,数字处理numberjs)。如果可以把这些模块分享出来,以后谁要进行相关功能开发的时候,直接拿开发好的模块使用即可,没必要自己在开发。在互联网有一个网站专门收集这样的工具包。www.npmjs.cn/
  3. 如果我们要使用这个网站里面的包,则我们需要使用一个功能,叫做 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、看见以下代码表示下载完成:

image.png
下载完后:本地项目目录下多了一个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
常用命令

npm yarn
npm init -y yarn init -y
npm install react –save yarn add react
npm uninstall react –save yarn remove react
npm install react –save-dev yarn add react –dev
npm update –save yarn upgrade
npm install -g @vue/cli yarn global add @vue/cli

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.复制安装目录至电脑的环境变量中

image.png

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享