共计 1983 个字符,预计需要花费 5 分钟才能阅读完成。
npm 认识
作为一个前端开发者,用了这么久的 npm,有一天突然问自己。自己究竟对 npm
有多了解?
npm 是一个包管理工具
想想我们最早写 js 的时候,对于重复引用的代码片段,我们是怎么引用的?
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
是不是感觉熟悉又陌生。这就是最早我们引用 js 的方式。后来由于 nodejs 出现了,作为一种可以运行在系统上的语言,没有了 html,我们该怎么引用 js 呢?
module.exports=function(x){console.log(x);};
var xxx = require('xxx');
因此出现了 CommonJS 规范。当然此外,我们还有 AMD,CMD 等。那么这些规范的出现使得我们可以更加愉快地引用 js 代码。这时候我们便需要一种方式可以更方便地提交或者获取某些代码。npm 因此出现了。他有以下功能:
- 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
- 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。
npm 做了什么?
首先我们要知道我们的项目中需要用到什么依赖,版本是什么?这些信息需要找一个地方记录,这就是package.json
。
npm init
npm 可以通过命令创建模块,生成 package.json 文件,生成的文件包含了基本的结果。当我们需要从网上下载依赖的时候只要执行
npm ininstall xxx
npm 就会把依赖下载放到 node_modules
文件夹中, 并在 package.json
中记录我们下载的依赖的名称和版本号。
引用流程
当我们引用 js 的时候,系统该去哪里找我们需要的代码?npm 作了一个规范,就是 node_modules
。系统会先当前目录找有没有适合的代码,如果找不到就往上一层文件夹找,找到node_modules
之后就会在 node_modules
里找。找到代码,便引用成功。如果找不到就在全局里面找,还找不到就会抛出错误。
package-lock.json
上面刚刚说到的,npm 引用的时候是一层一层的往外找的,这是为什么呢?因为我们在开发的时候引用的某些依赖本身,并不是完全由该作者全程写完的。有可能某些依赖中还依赖着另一个包。所以我们会看到 node_modules
包里的文件夹里还有一个 package.json
,而他的依赖则放在当前的文件夹里的node_modules
中。
├─node_modules
└─xxx
└─node_modules
这样就会产生一个问题,万一引用的依赖又套另一层依赖,这样由非常多层依赖组层。最后引用的路径就会很长,有可能会遇到不可估算的错误。另外这样也会导致同一个包会被下载多次的问题。为了解决这个问题,从 npm 5(这就是为什么会有 yarn 的原因)之后 package-lock.json
出现了。他的作用是记录这项目中用到的依赖包的具体版本号,和位置信息。在每次 install
的时候他会先检查 node_modules
的首层有没有该依赖需要的包,如果有了就不下载。如果有同名的包,可是版本号需求不同,就会在该 package.json
的路径下再创建 node_modules
把那个需要的包放进去。这样由于引用的时候是一层一层外网找的,就可以确保当前依赖引用的是正确的包。也大大减少了套层的情况。
下载的库在哪里?
我们都知道当我们执行 npm install
的时候,会下载我们想要的代码。可是他是从哪里下载回来的呢?npm 有自己的一个代码库,也就是我们常用的 https://www.npmjs.com。可是这里有个问题,这个地址的国外的服务器,会导致我们经常出现下载很慢的结果。这就出现了很多我们说的“源”。所谓的“源”就是不同的代码仓库,国内目前用的最多的应该就是阿里的源,想要改变下载代码的仓库只要执行。
npm install xxx --registry=https://registry.npm.taobao.org
这样我们就可以改成从阿里的服务器上下载资源。如果想要全局替换这个源,可以执行
npm config set registry https://registry.npm.taobao.org
这时候可能又聪明的同学要问了,能不能在不改全局配置的情况下给项目规定一个特定的源?其实在 npm 的安装目录下有一个 .npmrc
文件,他记录着 npm 的源地址,我们通过上面的命令事实上就是在修改他。如果我们想要在项目中配置特定的源,只要在项目目录下新建一个 .npmrc
文件,编辑内容:
registry=https://registry.npm.taobao.org
这样只要我们在这个项目下执行 npm install
都会指向我们规定的地址了。
待补充 …