日常的学习笔记，包括 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 进行安装。

{
  "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 。 后面可以添加 依赖关系。

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

• 全局安装

  # 安装一个全局 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文件。随便起一个名字。

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

  更新 package.json 文件

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

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

  npm link
  

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

• 本地安装

  npm install webpack --save-dev
  

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

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

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

  "devDependencies": {
      "webpack": "^4.39.3"
  }
  

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

  npm i jquery@2.2.0
  

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

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

package-lock 文件

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

{
  "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 来执行。

"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 提供了 pre 和 post 两种钩子机制。可以定义某个脚本前后的执行脚本，没有定义默认会忽略。

  "scripts": {
     "prehello":"echo prehello",
     "hello": "echo hello",
     "posthello":"echo posthello"
  }
  

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

依赖关系

依赖关系分为以下几种：

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

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

开发依赖 和 生产依赖

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

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

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

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

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

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

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

同等依赖

同等依赖，就是节点 peerDependencies 。

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

版本管理

参考文献 semver | npm中文文档

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

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

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

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

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

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

标识含义

预发版

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

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

npx的用法

参考官网 npx - npm

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

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

执行脚本

npx webpack

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

避免安装全局模块

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

npx create-react-app react-project

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

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

npm包的发布

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

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

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

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

npm publish

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

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