Created By JishuBao on 2019-03-20 12:38:22
Recently revised in 2019-03-20 12:38:22

 

  欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址     

开篇题外话：

 最近在钻研自己写webpack的loader插件等，就由于需要来回操作测试，需要用到很多Npm以及yarn的命令,所以就百度百度，很多情况都还是百度不到，为了不让命令(本人太菜)成为成长路上的绊脚石，所以一气之下将node以及相关的包等删去，从头开始！

文章简介：

1、安装node

2、npm解析

3、yarn解析

4、npm的未来：npm5.0

5、yarn/npm 常用命令对比

6、淘宝镜像cnpm

7、pnpm了解

一、安装Node

 什么是Node?在Node官网的首页中我们可以看到这么一行定义。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 

 由于本文重点不在node上，而是重在于阐述node的模块管理工具npm/yarn上，所以一笔带过。

 Node下载地址,进入node下载地址，点击选择自己电脑相符合的包，本人一般都会选择zip包(压缩包),因为这样是需要自己配置的，msi文件系统会自己帮你配置,我总觉得自己可以配置的就不需要系统帮你配置,这样风险也可以自己掌控！我的电脑是64位的,所以点击下面的链接。

 下载压缩包到自己的指定文件夹目录里面

 我们下载了肯定要在任何地方使用，但此时我们加入在c盘输入node，肯定会得到这样的回应：

 是不是有些小伙伴会很纳闷，为啥呢，明明我都已经安装了，没错，这时候“臭名昭著”的环境变量就进入我们的视线了,但是究竟什么是环境变量呢？

 环境变量是什么呢？其实我们可以把它理解为【系统的视线范围】，没错，配置进入了环境变量的程序，就等于是进入了系统的视线范围，打开DOS命令窗口后输入程序名，系统就会把在其视线内的（环境变量内）的程序找出来，如果程序没有配置进入环境的变量的话，那系统自然就找不到。

 压缩版与运行版还是有一定的差距,下载好Node后,在Node目录下新建2个文件夹。

 其中：

node-global : npm全局安装位置
node-cache  : npm缓存路径

 右键点击我的电脑/此电脑,属性-->高级系统设置-->高级-->环境变量，点击用户变量，新建环境变量。

 将node.exe 所在的目录添加到path环境变量，这样我们在使用命令行时就可以在任意路径使用node命令了，同时该目录下有一个npm.cmd文件，打开文件其实就是将我们的npm命令映射到node.exe npm-cli.js，由于存在该映射所以只要把node.exe 所在的目录添加到path环境变量，也可以在**任何目录下执行npm install*了。

 写到这里其实node就算已经装好了。在命令行中输入如下命令测试:

node -v
npm -v

 那么node-global :npm全局安装位置，node-cache：npm 缓存路径 又是怎么与npm发生关系呢？

 通过如下命令进行配置：

npm config set prefix "D:\node-v10.15.3-win-x64\node-global"

npm config set cache "D:\node-v10.15.3-win-x64\node-cache"

 执行Npm命令进行测试:npm install webpack -g

 会发现node-global下node_modules中多了webpack文件夹

 webpack是用来打包的module，通常我们会在命令行中执行，而webpack同样在node-global中做了映射，所以只需要将node-global加入path环境变量即可，上面已经配置完成。

 现在可以在命令行中任意路径下执行node/npm/webpack命令了。

至此node已经完全安装了。

二、npm解析

1.npm简介：

 npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

 npm的初衷：JavaScript开发人员更容易分享和重用代码。

 npm的使用场景：

 1.允许用户获取第三方包并使用。

 2.允许用户将自己编写的包或命令行程序进行发布分享。

 npm版本查询：npm -v

 npm安装：

 1.安装Node.js，由于新版的nodejs已经集成了npm，所以可直接通过输入npm -v来测试是否成功安装。

 2.使用Npm命令来升级Npm：npm install npm -g

2.npm工作原理：

1.什么是包(package)？

 包是描述一个文件或一个目录。一个包的配置通常由以下构成：

 1.一个文件夹包含一个package.json配置文件。

 2.包含（含有package.json文件的文件夹）的Ｇzip压缩文件。

 3.解析gzip的url

 4.为注册表添加 <name>@<version>的url 信息注意的是即使你从来没有在注册中心发布你的公共包,你可能仍然可以得到很多所有这些package, 使用npm的好处:

 5.如果你只是计划想写增加一个节点或/。

 6.如果你安装它也希望在其他地方分成一个tarball后进行包装

Git url的形式

git:/ /github.com/user/project.git # commit-ish
git + ssh:/ / user@hostname:project.git # commit-ish
git +http://user@hostname项目/ blah.git # commit-ish
git +https://user@hostname项目/ blah.git # commit-ish
可以捡出commit-ish的一个git任何标签和master分支、安全哈希算法。

2.什么是模块(module)？

 模板是通过配置文件中的一个dom节点进行包含一个或多个包。通常一般由包和配置文件以及相关模块程序构成完成一个或多个业务功能操作。一个模块可以在node . js 程序中装满任何的require()任何。 以下是所有事物加载模块的例子 :

1.一个文件夹package.json文件包含一个main字段。

2.一个文件夹index.js文件。

3.一个JavaScript文件。

3.npm的包和模块的关系

 一般来说在js程序中使用require加载它们的模块在节点中进行配置npm包，一个模块不一定是一个包。例如,一些cli包, js程序节点中只包含一个可执行的 命令行界面,不提供main字段。 那么这些包不是模块。几乎所有npm包(至少,那些节点计划)包含许多模块在他们(因为每个文件加载require()是一个模块)。 几乎所有的npm包都关联着多个模块，因为每个文件都使用require()加载一个模块。 从module加载文件中的上下文node节点。如：var req =require('request')。我们可能会说,“request模块赋值给req这个变量”。

4.npm的生态系统

1.package.json文件定义的是包。

2.node_modules文件夹是存储模块的地方。便于js查找模块。

 例如：如果创建一个node_modules/foo.js文件，通过var f=require('foo.js')进行加载模块。因为它没有package.json文件所以foo.js不是一个包。 如果没有创建index.js包或者package.json文件"main"字段,即使是在安装node_modules,因为它没有require()所以它不是一个模块。

3.npm相关常识

package.json文件配置目录：

三、yarn解析

 Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。

 在项目中安装yarn

npm install -g yarn

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

 2.同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。

"10.0.3",
"~10.0.3",
"^10.0.3"

 “5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。

 3.安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。

带着这些坑，我开始了解Yarn的优势及其解决的问题。

1.速度快

 1.并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。

 2.离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

2.安装版本统一

 为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。

3.更简洁的输出

 npm 的输出信息比较冗长。在执行 npm install <package> 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。

4.多注册来源处理

 所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。

5.更好的语义化

 yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。

四、npm的未来:npm5.0

有了yarn的压力之后，npm做了一些类似的改进。

 1.默认新增了类似yarn.lock的 package-lock.json；

 2.git 依赖支持优化：这个特性在需要安装大量内部项目（例如在没有自建源的内网开发），或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。

 3.文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中，将改为使用创建 symlinks 的方式来实现（使用本地 tarball 包除外），而不再执行文件拷贝。这将会提升安装速度。目前yarn还不支持。

五、yarn/npm常用命令对比

npm install、npm install --save、npm install --save-dev区别：

1.npm install X:

• 会把X包安装到node_modules目录中
• 不会修改package.json
• 之后运行npm install命令时，不会自动安装X

2.npm install X –save:

• 会把X包安装到node_modules目录中
• 会在package.json的dependencies属性下添加X
• 之后运行npm install命令时，会自动安装X到node_modules目录中
• 之后运行npm install –production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中

3.npm install X –-save-dev:

• 会把X包安装到node_modules目录中
• 会在package.json的devDependencies属性下添加X
• 之后运行npm install命令时，会自动安装X到node_modules目录中
• 之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中

使用原则：

 运行时需要用到的包使用–save，否则使用–-save-dev。

npm		yarn
npm install	安装模块(install安装是yarn默认行为)	yarn (install)
npm install -g <packageName>	全局安装模块	yarn global add <packageName>
npm install <packageName> --save	安装指定模块	yarn add <packageName>
npm uninstall <packageName>	卸载指定模块	yarn remove <packageName>
npm uninstall -g <packageName>	卸载全局模块	yarn global remove<packageName>
npm install <package> --save-dev	更新指定模块	yarn add <packageName> --dev
npm update <package> --save	更新指定模块	yarn upgrade <packageName>
npm outdated <package>	检查模块是否过时
npm ls	查看安装的模块
npm init	在项目中引导创建一个package.json文件
npm help	查看某条命令的详细帮助
npm root	查看包的安装路径
npm config	管理npm的配置路径
npm cache	管理模块的缓存
npm start	启动模块
npm stop	停止模块
npm adduser	用户登陆
npm publish	发布模块
npm list	查看当前目录下已安装的node包

六、淘宝镜像cnpm

 由于npm速度之慢,有时候下载依赖网速稍微不好就下载不下来,所以就引入了cnpm

安装：命令提示符执行: npm install cnpm -g --registry=https://registry.npm.taobao.org。

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误

PS：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。cnpm还是有很多问题的,建议仅在install的时候使用cnpm。

七、pnpm了解

 本人没有用过pnpm，传说他比Npm快三倍,我估摸着就和cnpm差不多,但是可能比cnpm更加安全稳定等...具体的大家可以看pnpm。

如果你觉得我的文章还不错的话，可以给个star哦~，GitHub地址