npm入门使用介绍

2022-09-21 14:59:46 浏览数 (1)

文章目录
  • 写在前面
  • 什么是npm
  • 为什么需要npm
  • 安装npm
  • npm 常见操作
    • 安装淘宝镜像
    • 为什么要镜像
    • 方式一：
    • 方式二：
    • 安装第三方库（基本使用）
    • 安装特定版本
    • 全局安装
    • 默认安装 （运行时依赖）
    • 安装开发时依赖
    • 卸载包文件
    • 查看安装的列表
    • 帮助
    • npm初始化
    • package.json解释
  • 竞品yarn
    • 安装包文件
    • 卸载包文件
  • 写在后面

写在前面

可能看到标题进来都是比较好奇的，毕竟一个工具类型的东西有什么好写的，我在没有系统的看过npm之前也是这么认为的，其实npm要比我们想的强大，特别是最新的版本之后，弥补了之前npm本身的一些缺点，所以这篇文章就介绍一些npm的基本的安装和使用，本篇文章旨在介绍npm，所以我会尽量将阅读者当作是想获悉npm基本知识的人，而不是开发了很多年，早就对这种在线安装包的开发模式熟悉的人来说的，所以看起来文章的难度并不大，只是希望可以对认识npm有一些帮助。

什么是npm

npm 全称比较好记 叫做 node package manger nodejs的包管理器，这是他的官网，就是用来管理我们日常开发中需要使用到的一些工具，比如jQuery、BootStrap、Layui等等，包括后面的vue、react、angular等等，他的工作流程就是通过命令进行联网在线找到github上托管的js源文件，并且帮你下载下来，这样你就可以不用再去找到js的官网，再去下载引入到本地了。

为什么需要npm

不管是前端还是后端，开发的过程中都是需要很多工具类的文件，过去我们的前端的开发模式是功能自己写，到后来的别人写好了一些框架我们拿来用，但是所有的框架都是在他们自己的官网上面，或者是在github上，我们用的时候需要自己上网找到，引入，后来为了简单和加速，有了cdn，我们可以直接使用cdn进行引入我们需要的包，举个简单的例子： 引入一个jQuery 常规的你如方式： <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 使用nppm npm install jquery 刚一看没啥区别，都是一行代码，但是区别在于项目中的存放方式，下面会讲到，因为项目有的时候会比较大，所以如果我们引入了很多第三方的库或者是一些工具类，全部放到代码里面，使用cdn的还稍微好一点，如果使用的是本地js引入的方式，那么项目无疑就会变的非常的大，那么发布维护都很不利，所以我们需要一个告诉我们项目中哪些库是被需要的就可以了，具体接手项目的程序员看到之后通过一个配置文件就可以知道原来我的项目需要是这些库，从而启动项目的时候再进行加载，如果仅仅看这些，cdn也可以满足，他也是项目启动运行的时候进行加载，但是他有一个点没办法做到就是模块化和多文件引入的操作，也就是如果我又很多文件都需要引入这个js，那么cdn就只能每一个都引入一下，不太好直接全局使用这个文件，当然这些都是可以通过技术手段实现的，npm最大的优势在于给我们提供了一个工具类的管理仓库，我们不需要再进行为了一个工具类查找一个互联网了，直接使用命令进行安装即可！大大的提高了开发效率，减少了失误。

安装npm

npm既然是依赖于node，那么安装npm其实直接安装node即可，osx和windows阵营安装的方式基本一致，通过node官网直接下载即可，打开即用，安装结束打开终端，输入命令查看安装是否成功 node -v // 查看node版本 npm -v //查看npm版本 当然你也可以通过npm安装npm进行最新版本的升级 npm install -g npm@latest //osx 升级最新版本npm cd %ProgramFiles%nodejs npm install npm@latest windows升级最新版本的

npm 常见操作
安装淘宝镜像
为什么要镜像

因为npm工具仓库托管是在github上，属于国外的网站，所以下载的时候比较慢，再加上他是一个队列执行的状态，也就是上一个包没有安装结束的时候，下一个包是需要进行等待的，这就导致npm安装包的时候会很慢，还有的时候安装失败的原因

方式一：
代码语言：javascript复制
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 检测是否安装成功
代码语言：javascript复制
cnpm -v
方式二：
代码语言：javascript复制
npm config set registry https://registry.npm.taobao.org
  • 检测是否安装成功
代码语言：javascript复制
npm config get registry
安装第三方库（基本使用）
  • 安装jQuery
代码语言：javascript复制
npm install jquery
安装特定版本
代码语言：javascript复制
npm install jquery@版本号
全局安装
代码语言：javascript复制
npm install jquery -g
默认安装 （运行时依赖）
代码语言：javascript复制
npm install jquery --save
安装开发时依赖
代码语言：javascript复制
npm install jquery --save-dev
卸载包文件
代码语言：javascript复制
npm uninstall jquery
查看安装的列表
代码语言：javascript复制
npm list
帮助
代码语言：javascript复制
npm help
npm初始化
代码语言：javascript复制
npm init //方式一 你需要自己一步一步的配置自己的信息
代码语言：javascript复制
npm init -yes //方式二 全部执行默认配置

执行结束机会生成一个package.json文件

package.json解释
代码语言：javascript复制
{
  "name": "npmshow",  //npm 包名
  "version": "1.0.0", //版本号
  "description": "", // 描述信息
  "main": "index.js", //入口文件
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1" //执行命令
  },
  "keywords": [], //关键字
  "author": "", //作者
  "license": "ISC", //协议
  //运行时依赖列表
  "dependencies": {
    "bootstrap": "^5.2.0",
    "jquery": "^3.6.0",
    "vue": "^3.2.37"
  },
  //开发时依赖列表
  "devDependencies": {
    "layui": "^2.7.6"
  }
}

  • package.json 的作用

前面我们说过，一个项目需要哪些依赖包是需要一个配置文件的，不然别人拿到你的项目之后或者程序运行的时候怎么知道你的项目需要哪些呢？这个文件就是记录该项目需要的一些依赖包的，比如上面的，当我们拿到之后就知道，这个项目需要三个运行依赖和一个开发依赖

  • 运行时依赖和开发时依赖的区别

项目开发和上线之后都需要的依赖，就是运行时依赖，这个需要自己进行判断，如果是一些开发时候才需要的依赖，上线运行之后不需要的，为了避免给线上带来问题，我们建议安装的时候自己区分，开发时依赖在上线之后是不会被加载的！

  • “bootstrap”: “^5.2.0”, 前面的符号解释

因为不同的js库又很多迭代版本，一般我们npm默认安装的都是最新的版本，前面是的说明下次执行安装的时候如果有最新的版本，会安装5.2.0 后面两位的版本，也就是说5的版本不动，从第二个版本开始算，如果有5.3就安装5.3，如果有5.2.1 就安装5.2.1，相对应的还是有一个符号～，这个是最小版本的变动，也就是第三位的变动，比如5.2.1的话，就安装，5.3是不更行的

  • scripts 是做什么的

这个是node的入口文件，如果我们需要一些特殊的node命令是可以直接进行这里配置的，这里最常见的配置就是后期配合webpack或者是一些压缩命令进行项目的打包和运行，比如我们设置一个最简单的 "scripts": { "version": "node -v" //执行命令 },

  • 如何运行该配置的命令

npm run version // version就是你配置的名字

竞品yarn

yarn也是一个包安装工具，和npm的指责不能说毫无关联，只能说一摸一样，只是他解决了npm的一些弊端，npm比较明显的弊端有一些，比如说安装源不确定，安装太慢，需要镜像等等，当然这些在npm5.0版本之后已经得到很大的改善，不过在他没有改善的时候他的对手yarn已经悄悄的追上了，yarn是脸书开发的一个包管理工具，他的使用基本上和npm是一样的，我们也可以通过npm进行安装，这里不对yarn做太多的讲解，只说一些简单的常见的操作，毕竟文件是npm的介绍，多少有点喧宾夺主了， yarn官网

  • 安装yarn

npm install yarn

  • yarn基本使用

安装包文件 yarn add jquery 卸载包文件 yarn remove jquery 别的基本都是一样，配置文件也差不多，学会了一个，这个基本上就可以直接上手了，这里不做过多的解释了！他的优点比较明显，上述的npm的缺点解决掉就是yarn的优点，不过也说了，最新版本的npm后续已经也解决了这些问题，所以项目具体使用什么，自己决定就好了。

写在后面

关于npm的介绍这里就简单的说这些吧，其实关于npm的东西还有很多，比如自己上传注册自己写的包，加密等操作，这里我平常也不怎么使用，所以就不写， 避免误导你们，上述的这些搞明白了基本上对你的工作已经没有什么太大的影响了，工作中也就是这些操作了，希望可以对你们认识npm有一些帮助。

npm yarn node.js json javascript

0 人点赞