学习笔记—Npm的介绍与使用

日常的学习笔记,包括 ES6、Promise、Node.js、Webpack、http 原理、Vue全家桶,后续可能还会继续更新 Typescript、Vue3 和 常见的面试题 等等。


npm的介绍与使用

官方网站 https://www.npmjs.com/

npm 全称 node package manager ,是 nodejs 的包管理器 ,用于 node 插件管理,包括安装、卸载、管理依赖等。

常用命令与配置

这里我们只总结一些平时工作中会经常用到的 命令配置

npm init

默认安装一个 package.json 的文件,直接使用 npm init -y 进行安装。

1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

我们来介绍几个重要字段。

  • name :当前包的 名字 ,也就是最终发布到 npm官网 上包的名字,不能和已有的包重名。
  • version: 当前包的 版本号
  • main:当前包的 入口文件 ,也就是使用 require 默认引入的文件。
  • scripts:可以配置一些 执行脚本 ,如 测试脚本 等。
  • license协议许可

npm install

npm install 安装指定的包,简写为 npm i。 后面可以添加 依赖关系

安装方式分为 全局安装本地安装

  • 全局安装

    1
    2
    # 安装一个全局 http 服务。
    npm install http-server -g

    全局安装 的意思很简单,就是安装的模块会被安装到全局下。

    可以在命令行中直接使用安装的包,其实只是在 /user/local/bin 目录下做了个 链接 连接到 /usr/local/lib/node_modules/http-server/bin/http-server 这个文件下。

    当我们执行 http-server 这个命令时,会调用链接 到这个文件。(mac因为有权限问题,这里我们可以加 sudo 来执行命令)

    关于此部分的使用,可以参考 我的博客 node中第三方模块

    我们可以自己来尝试写一个包,创建bin目录,新增www文件。随便起一个名字。

    1
    2
    3
    // #! 表示采用node来执行此文件,同理 shell可以表示 sh
    #! /usr/bin/env node
    console.log('莫小尚');

    更新 package.json 文件

    1
    2
    3
    "bin": {
    "my-pack":"./bin/www" // 这里要注意名字和你建立的文件夹相同
    },

    再用一个常用的命令实现链接的功能。

    1
    npm link

    这样我们在命令行中直接输入 my-pack 就可以 打印出结果。

  • 本地安装

    1
    npm install webpack --save-dev

    本地安装 就是在项目中使用,而非在命令行中使用。

    执行上述命令,可以生成一个 package-lock.json 文件。

    安装后的模块被安装到了 node_modules 下,并且在 package.json 中也增加了一些内容。

    1
    2
    3
    "devDependencies": {
    "webpack": "^4.39.3"
    }

    我们可以通过添加后缀,指定版本号来安装包。

    1
    npm i jquery@2.2.0

    (默认执行 npm i会安装项目中所需要的依赖,如果只想安装生产环境依赖可以增加 --production参数)

    下面我们来介绍一下 package-lock 文件。

package-lock 文件

package-lock.json 的作用是 锁定依赖安装结构 ,保证在任意机器上执行 npm install 都会得到完全相同的 node_modules ,因为package-lock.json 存储所有安装的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "my-pack",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@webassemblyjs/ast": {
"version": "1.8.5", // 当前依赖的版本
"resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.8.5.tgz", // 从哪个渠道安装的
"integrity": "sha1-UbHF/mV2o0lTv0slPfnw1JDZ41k=", // 内容hash
"dev": true,
"requires": {
"@webassemblyjs/helper-module-context": "1.8.5",
"@webassemblyjs/helper-wasm-bytecode": "1.8.5",
"@webassemblyjs/wast-parser": "1.8.5"
}
},
}
// ...

(如果手动更新了 package.json文件,执行安装命令会下载对应的新版本,并且会自动更新 package-lock 文件)

scripts配置

package.json 中可以定义自己的脚本通过 npm run 来执行。

1
2
3
4
"scripts": {
"hello": "echo hello",
"build": "webpack"
}

我们可以使用 npm run hello 执行自定义脚本,也可以使用 npm run build 执行node_modules/.bin 目录下的 webpack文件

  • npm run 命令执行时,会把 ./node_modules/.bin/ 目录添加到执行环境的 PATH 变量中。因此如果某个 命令行包 未全局安装,而只安装在了当前项目的 node_modules 中,通过 npm run 一样可以执行该命令。

  • 执行 npm脚本 时要传入参数,需要在命令后加 -- 标明。如 npm run hello -- --port 3000 可以将 --port 参数传给hello 命令。

  • npm 提供了 prepost 两种钩子机制。可以定义某个脚本前后的执行脚本,没有定义默认会忽略。

    1
    2
    3
    4
    5
    "scripts": {
    "prehello":"echo prehello",
    "hello": "echo hello",
    "posthello":"echo posthello"
    }

(通过打印 全局 env 和 在项目下执行 npm run env来对比PATH属性,不难发现在执行 npm run 的时候确实会将 ./node_modules/.bin/ 目录添加到PATH 中)

依赖关系

依赖关系分为以下几种:

  • 开发依赖 devDependencies,开发时使用的依赖,上线时就不需要了。如 webpackgulp 等。
  • 生产依赖 dependencies,开发时会用,上线的时候也需要。如 vue 等。
  • 同等依赖 peerDependencies,安装某个库时,提示需要用到的其他依赖。如 安装bootstrap ,则需要用到依赖 jQuery
  • 可选依赖 optionalDependencies,如果有一些依赖包即使安装失败,项目仍然能够运行或者希望npm继续运行。
  • 打包依赖 (捆绑依赖) bundledDependencies,将这个对象中的包打包到最终的发布包里,就是将节点内的包压缩到一个压缩包中。

开发中用的最多的就是 开发依赖生产依赖同等依赖

开发依赖 和 生产依赖

开发依赖,开发环境所需要的依赖。同理,生产依赖,就是 生产环境所需要的依赖

  • –save:将保存配置信息到 package.json*,默认为 *dependencies 节点中。
  • –save-dev:默认为 devDependencies 节点中。

在实际开发中,我们 不填写任何标识,则会默认安装到 生产环境 中。

devDependencies节点

假设我们需要安装到 开发环境 ,则填写标识 --save-dev 即可。

dependencies节点

如果我们现在有一个 github 上克隆的开源项目,我们需要安装当前项目所需要的插件和各种依赖。

直接使用命令 npm install ,就会将上述两个节点下的依赖全部加载到 node_modules 下。

假设我们现在只需要 生产依赖 ,则在后面加上节点 production 即可。 npm install --production

同等依赖

同等依赖,就是节点 peerDependencies

在安装时会提示我们需要用到的 同等依赖包 有哪些,起到一个提示的作用。

peerDependencies节点

版本管理

参考文献 semver | npm中文文档

npm采用了 semver规范 作为依赖版本管理方案,semver 约定一个包的版本号必须包含3个数字。

MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号

  • MAJOR 对应大的版本号迭代,做了不兼容旧版的修改时要更新 MAJOR 版本号。
  • MINOR 对应小版本迭代,发生兼容旧版API的修改或功能更新时,更新 MINOR 版本号。
  • PATCH 对应修订版本号,一般针对修复 BUG 的版本号。

当我们每次发布包的时候都需要升级版本号。

1
2
3
npm version major  # 大版本号加 1,其余版本号归 0
npm version minor # 小版本号加 1,修订号归 0
npm version patch # 修订号加 1

如果使用 git 管理项目会自动 git tag 标注版本号。

标识含义

range含义
^2.2.1指定的 MAJOR 版本号下, 所有更新的版本匹配 2.2.3, 2.3.0; 不匹配 1.0.3, 3.0.1
~2.2.1指定 MAJOR.MINOR 版本号下,所有更新的版本匹配 2.2.3, 2.2.9 ; 不匹配 2.3.0, 2.4.5
>=2.1版本号大于或等于 2.1.0匹配 2.1.2, 3.1
<=2.2版本号小于或等于 2.2匹配 1.0.0, 2.2.1, 2.2.11
1.0.0 - 2.0.0版本号从 1.0.0 (含) 到 2.0.0 (含)匹配 1.0.0, 1.3.4, 2.0.0

预发版

  • alpha (α)预览版,或者叫 内部测试版;一般不向外部发布,会有很多bug;一般只有测试人员使用。
  • beta (β)测试版,或者叫 公开测试版;这个阶段的版本会一直加入新的功能;在alpha版之后推出。
  • rc (release candidate)最终测试版;可能成为最终产品的候选版本,如果未出现问题则可发布成为正式版本。

2.1.0-beta.1这样声明的版本用户不会立马使用,可以用来做测试使用)

npx的用法

参考官网 npx - npm

npx 命令是 npm v5.2 之后引入的新命令,npx 可以帮我们直接执行 node_modules/.bin 文件夹下的文件。

npx 想要解决的主要问题,就是调用项目内部安装的模块。

执行脚本

1
npx webpack

这样执行,会直接省略配置 scripts 脚本。

避免安装全局模块

全局安装的模块会带来很多问题,如 多个用户全局安装的模块版本不同

1
npx create-react-app react-project

我们可以直接使用 npx 来执行模块。

它会先进行安装,安装后会将下载过的模块删除。这样可以保证项目是最新版本。

npm包的发布

首先我们需要先切换到官方源 nrm,这样更快。(关于 nrm 可以参考我之前的博客)

1
2
npm install nrm -g
nrm use npm # 切换到官方源

之后将名字更新一下,这里也可以发布 作用域包 选定版本。

忽略可以使用 .npmignore,然后可以直接进行发布了。

1
npm publish

这样我们自定义的包就被上传到 npm官网 上啦。

本篇文章由莫小尚创作,文章中如有任何问题和纰漏,欢迎您的指正与交流。
您也可以关注我的 个人站点博客园掘金,我会在文章产出后同步上传到这些平台上。
最后感谢您的支持!

请打赏并支持一下作者吧~

欢迎关注我的微信公众号