npm超详细入门 源管理 | 常用指令 | 下载 | 淘宝源卸载

npm是跟Node.JS一起安装的包管理工具,随着node的发展,现在node已经变成一个很大的生态了,也许很多人都不用node来做东西,但是也会使用到npm。
我闲着没事写一个详细入门吧。从怎么做,是什么,代表了什么,为什么开始将,跟github教程一样,手把手教,小白都能看懂的教程

现在的npm,只要你安装上nodejs,里边就自带了npm,没有nodejs的去装一下,我上一篇博客写了nodejs的安装配置

如果是小白,按照我的顺序从上往下认真看,如果会用的可以直接点击目录找到你需要的东西。

说了nodejs是一个包管理工具,就是可以写下载别人已经写好的包,然后你来直接用就行了。你可以理解npm是类似于360软件管家,酷安之类的这种东西。

  • 你可以用软件管家:搜索软件、下载软件、卸载软件
  • 你可以用npm:搜索包,下载包,删除包

npm镜像源

下载肯定会有下载源头,但是npm的下载源在国外,也就是npmjs.org,根据我们国内的状况,下载国外的东西特别慢。这时候就得想一哈我们国内有没有下载源呢? (•̀ᴗ•́)و ̑̑ 当然有了,阿里就做了这个大好人。点击查看淘宝npm源相信我看教程,不要看这个网址写的添加教程)。
介绍一下淘宝源:是一个完整npmjs.org镜像,你可以放心用淘宝源代替官方版本,它是每十分钟跟随官方版本更新一次的。

首先打开你的cmd,有gitbash的用gitbash也可以。

你可以理解为gitbash就是功能比cmd多的cmd,gitbash可以用git的命令,也支持cmd的命令。

  • 在一个文件夹里打开cmd:你直接在地址栏输入cmd,回车即可 。
    在这里插入图片描述
  • 在一个文件夹里打开gitbash:你直接右键 gitbash here即可
    在这里插入图片描述

我这里用gitbash演示一下了。

查看源

既然是换源,那我先教一下怎么查看源源:
npm config list
就是查看你的npm源,我这里显示的是我用的官方源npmjs.org
在这里插入图片描述

扫描二维码关注公众号,回复: 10455372 查看本文章

使用淘宝cnpm命令行工具

添加淘宝源:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这边这句的意思就是用

  • npm install npm安装
  • -g全局 (不用管为什么全局,我后边会解释)
  • cnpm一个代称而已,你可以写别的名字
  • --registry=https://registry.npm.taobao.org地址

输入完之后两下回车还没反应的不要着急,毕竟安装也是需要时间的。最后显示这块就证明你的淘宝源添加成功了。
在这里插入图片描述

添加完淘宝源之后查看一下我们是否已经换源了。 输入查看源的命令之后??? (╯‵□′)╯︵┻━┻骗子,说好能换的呢!怎么还是官方源。往下看。
在这里插入图片描述
这是因为你刚才那就命令,我说的是添加源,不是替换源,就是即使你添加了淘宝源,你的官方源也还在,是依旧可以使用的了。上边说的cnpm是你可以自己改名字的,也就是说,你要查看淘宝源,需要用淘宝源的名字来查看嗷。我用的就是cnpm,所以我要查看淘宝源就需要输入
cnpm config list
看嘛,淘宝源就是添加成功了。不要停!继续看更换源!!!
在这里插入图片描述

删除卸载淘宝cnpm工具(先跳过这个,往下看)

刚看到这有人在想: 为什么添加淘宝源,还有个卸载啊,为什么添加了还有个更换源啊,为什么更换了还有用nrm啊。 结果看完nrm之后:(=゚ω゚)ノnrm真香,知道nrm之后,cnpm命令行工具也就没用了。可以直接把cnpm卸载掉了。
npm uninstall cnpm -g
卸载,然后输入
在这里插入图片描述

更换源

但是你想说我就是要换源!我就是不想用官方源!那你就换嘛。
npm config set registry https://registry.npm.taobao.org/config写不写都行,不写也能换。)
这句话的意思就是给npm这个代称 把源换为淘宝。换了之后你查看一下,这就是已经改了,你的npm也是淘宝源的了!!!
在这里插入图片描述

nrm源管理(可以快速换源)

然后你又想说,我要是想看看我所有的源怎么办,我总不能记住每个名字然后挨个config list吧。 (●´ω`●)机智如我告诉你怎么搞一个源管理器:
npm install nrm -g --save

  • npm install nrmnpm安装nrm
  • -g --save这个我后边会说,先不用纠结什么意思。

如果你刚才添加了cnpm,你也可以试试用你的cnpm安装。
cnpm install nrm -g --save
安装需要过程的嘛,如果输入命令没反应就等一会儿。눈_눈不要着急。下边这样就是下载完了。
在这里插入图片描述
下载完成以后你就可以用了。

查看所有源

nrm ls
查看你的所有源。看完之后你又一堆问号拍我脸上,什么玩意儿,我在上一步不就是添加了一个叫cnpm的淘宝源吗,现在怎么cnpm不是淘宝地址,淘宝源叫taobao?
在这里插入图片描述
因为!nrm是专门用来管理和快速切换私人配置的registry。,就是可以省略上边的那些大步骤。

迅速切换源

nrm use 名字就可以代替这句npm config set registry 地址
第一个方法虽然麻烦,但还是得教的嘛,万一有人不想装nrm呢。
继续,看一下,比如我想把源换为http://r.cnpmjs.org/,他的代称是cnpm,我就可以直接nrm use cnpm,还完查一下确实是换了。
在这里插入图片描述
如果你进了公司,公司有自己的镜像,

添加源

nrm add 名字 地址
我随便写一个:
在这里插入图片描述

删除源

nrm del 名字
在这里插入图片描述

测试响应速度

nrm test npm
这个在我电脑上翻车了,据说可以显示响应速度,可我电脑上从来不显示的。就永远没下文了。只能关闭重新打开。

npm的常用指令

下边是npm常用指令,也会解释上边的-g --save是什么东西,不了解的可以看一下。

查看版本

npm -v查看npm版本
npm version查看所有模块的版本
在这里插入图片描述在这里插入图片描述

初始化项目/包

如果你往一个文件夹里下载某个包,最好进行init,让npm知道这个是你要下载的目标文件夹,否则即使你进入了那个文件夹,也可能会下错位置嗷。不过下错位置不用担心,你只要网文件夹的上一级、上上一级,一直找到根目录,总会找到的。
npm init 初始化项目,用这个init之后他会提示你让你输入一些信息。如果你不想输入这些信息,你可以直接用 npm init -f
我用npm init 演示一下:

  • package name就是你的名,默认是你进入的文件夹的名字,如果确定叫这个名字你就直接回车
  • version 包的版本,默认1.0.0,你直接确认就可以了,你想更改的话就改
  • description 添加描述信息,不想添加直接回车,尽量添加上,要不然npm会一直提示警告
  • entry point 里面的文件是一个引用另一个的,但是总有一个文件是最后一个文件,它只引了别的文件,那么他就是入口文件,默认index.js,直接回车就好了。如果你入口文件不是index,那就修改(这都是后话,现在直接回车就行了。)
  • test command 我忘了是啥了,回车没错的
  • git repository git的地址,没有的话不填,最好随便写点,要不然npm会一直提示警告
  • keyword 关键字,就跟论文一样,设定关键字人家可以根据关键字搜索到你的包
  • author 作者,不想写名字回车
  • license 回车

这样你就建好了一个包。你现在看看你的文件夹里就多出来一个package.json,里边有你刚才输入的信息,可以修改哦。
在这里插入图片描述
在这里插入图片描述

搜索包

搜索你需要的包,刚才建项目的过程教了创建json,里面会一个keywords,就是按照换这个来搜索的。我示范一下搜索math
npm search 关键字或者npm s 关键字

如果出现以下报错,把你的源改回官网源就可以了。据说这是淘宝源出现的小问题,搜索会报错,你可以用官方源搜索,用淘宝源下载(?得亏nrm方便是嘛)

npm WARN search fast search endpoint errored. Using old search.
npm WARN Failed to read search cache. Rebuilding
npm WARN Building the local index for the first time, please be patient
npm WARN Search data request failed, search might be stale
npm ERR! No search sources available
npm search math

在这里插入图片描述

安装包

  1. npm install 包名或者npm i 包名
    安装之后你看看你文件夹里就多出一个node_modules文件夹,里面就有math了。
    下边有两个警告不用管,因为刚才init的时候我没添加描述和git地址,添加就不会提示了。
    在这里插入图片描述

  2. npm install 包名 -g或者 npm i 包名 -g
    全局安装(一般都是一些工具,比如cnpm,比如nrm,就是不止你这个项目要用。)
    npm root -g可以查看全局安装目录。我这里显示了这个地址,我进入这个地址就可以看到刚才全局安装的nrm文件夹。
    在这里插入图片描述
    在这里插入图片描述

  3. npm install 包名 --save 或者npm i 包名 --save--save也可以写-S
    安装指定的包并添加依赖。注意了!!!这个比较重要!!!但是下边的5.也重要啊,理解了3再看5啊!!!
    下边有两个警告不用管,因为刚才init的时候我没添加描述和git地址,添加就不会提示了。
    在这里插入图片描述

    为什么说--save重要,因为如果不加,你的dependencies里边可能不会写上你下载的包(不会添加依赖)在这里插入图片描述
    不写你下载的包(不会添加依赖),这对你可能没什么影响。但是剖析一下嗷:

    • 你,需要下载别人的包
    • 你下载的这个包,可能还用了其他人的包
    • 那你怎么知道用了其他什么包?就得看dependencies。
      • 因为包搞完之后,上传到时候不是不带node_modules文件夹的。
        • 为什么不带node_modules文件夹
          • 因为你使用的包是别人写的,你连带modules文件夹上传,
            就会造成我的包还带着别人的包,那岂不是无限套娃?
        • 因此上传的包都是不带node_modules这个文件夹的
      • 不带node_modules,你还想用这个包
      • 你就得自己下载全了你下载的包都用到了什么包
      • 所以你就需要看dependencies了。
    • 所以你最好还是使用–save,给自己的包加上dependencies。
    • 눈_눈 你可能说“没关系,我是小辣鸡,没人用我的包”,万一哪天你就成大佬了呢,所以还是加上--save吧。
  4. npm install
    添加node_modules,安装所有依赖。就是我刚才说的,既然下载了别人的包,那人家可能用到了其他的包,那怎么办,一个个下载吗?其实你只要进入添加依赖的包的文件夹,npm install即可安装所有依赖。
    例如我的demo,里边添加依赖了,是math。我现在把node_modules删除,假装我是下的包,里面只写了依赖,但是没有node_modules文件夹。$ npm install之后就会发现,里边的依赖装齐了。
    在这里插入图片描述

  5. npm install 包名 --save-dev 或者npm i 包名 --save --dev (写法不严格 --save--dev也可以写-D,小写也行。--dev-dev也行)
    **5.超级重要的!工作中用的比3.多。**原因可以看最后。

注意!!!我在最后补充了一下--save-dev--save的区别,可以去看看。

删除包

  1. npm remove 包名 或者npm r 包名
    删除一个包,下边有两个警告不用管,因为刚才init的时候我没添加描述和git地址,添加就不会提示了。
    在这里插入图片描述
  2. npm uninstall 包名或者npm uni 包名
  3. npm uninstall 包名 -g(如果你安装用的是 npm install 包名 -g
  4. npm uninstall 包名 --save(如果你安装用的是 npm install 包名 --save
    npm uninstall 包名 --save-dev(如果你安装用的是 npm install 包名 --save-dev

npm install -S -D 的区别

  1. npm install 名字 -S=npm install 名字 --save
    (1)会把需要用的包安装到node_modules文件夹中
    (2)会在package.json dependencies 属性下添加依赖
    (3)之后运行npm install命令时,会自动安装依赖到node_modules目录中
    (4)之后运行npm install --production或者注明NODE_ENV变量值为production时, 自动安装依赖到node_modules目录中
  2. npm install 名字 -D=npm install 名字 --save-dev
    (1)会把需要用的包安装到node_modules文件夹中(和上边一样)
    (2)会在package.json devDependencies属性下添加依赖
    (3)之后运行npm install命令时,会自动安装依赖到node_modules目录中(和上边一样)
    (4)之后运行npm install --production或者注明NODE_ENV变量值为production时,不会自动安装依赖到node_modules目录中

dependencies与devDependencies 都是在package.json中的配置信息。不止名字不同的。那么为什么前者自动安装依赖到node_modules中,后者不会自动安装依赖到node_modules文件夹中?
dependencies 与 devDependencies 的区别:

  • dependencies
    是生产环境的依赖。是生产阶段使用到的,就是要发布的版本,让别人去使用的。
  • devDependencies
    是开发环境的依赖。是生产阶段和开发阶段都要使用的,就是你平时写它的时候,以及要发布的时候。

举个例子, 比如你要写一个项目,里边用到了webpack,但是你将它写完之后,可以让别人使用,但是使用过程中已经不需要webpack了,因此可以不安装。
为了区分,你开发过程中就把依赖放在devDependencies里的,就证明是你开发需要的东西,别人用时是不会自动安装到node_modules中的,因为你开发过程中使用的东西对方已经不需要了;但是当你的项目发布了,就会把必须的那些依赖放到dependencies 里,因为这些必不可少。
再举个栗子, 比如我想做一个礼物给我好朋友,我决定自己缝一个小熊。然后我买好diy材料包开始做。这个时候整个材料包里的工具就放在devDependencies里。小熊缝好了以后我送给我好朋友了。我给他熊就行了,熊已经缝好了,针线什么的就没必要给他了。所以只有熊在Dependencies里。


我是萝莉安安。学习全靠自己摸索,但是应该不会有错。如果什么地方有问题的话欢迎指正 (•ㅂ•)/♥

发布了131 篇原创文章 · 获赞 451 · 访问量 54万+

猜你喜欢

转载自blog.csdn.net/qq_36667170/article/details/104942300