姑苏城外一茅屋，万树梅花月满天

0%

npm | 使用和描述

发表于 更新于 分类于 ， ， ， Valine：

这里对 npm 有一个全方位的入门。

NPM 是围绕着语义版本控制（semver）思想而设计的，我们在软件版本中碰见的：

  • rc
  • 1.x.x
  • alpha、beta

等名词都可以在 semver.org 得到解释介绍，简单来说规范是

  • 主版本号.次版本号.修订号（MAJOR.MINOR.PATCH）
    • 主版本号：当你做了不兼容的 API 修改；
    • 次版本号：当你做了向下兼容的功能性新增；
    • 修订号：当你做了向下兼容的问题修正；

NPM 中使用了一个命名为package.json的文件作为一个 NPM 包的描述文件，package.json包含了包的基本信息（名称、版本号、描述、作者等）和依赖关系，例如：

1
2
3
4
5
6
7
8
{
    "name": "demo",
    "version": "1.0.0",
    "dependencies": {
        "webpack": "^4.29.6",
        "css-loader": "~2.1.0",
    }
}

除了 version 符合 semver 规范以外，再来看下其他两项：

  • name：上面的代码就是表明了这个项目为demo，这样如果我们将来发布到 npmjs.com 会以这个来命名，除了这种方式的名称，还有一种命名的方式是@scope/name的方式，是作用域包，例如我们用来转化 ES6 语法的@babel/core就是@babel的作用域

  • dependencies：是demo这个项目的依赖，就是 demo 这个包内离开webpack这个包就不能使用了，对应的还有devdependencies，开发以来，一般需要二次开发 demo 的时候需要安装的包，实际项目中，webpack是构建工具，代码不会直接用 webpack 的 API，而只在开发和打包的时候采用，所以正确做法是放在devdependencies中。

注意到dependencies 中webpack 的后面版本号前面加了^，意思是主版本是4的最新版本，每次执行安装命令的时候，会更新符合这个规则的最新包,也就是 4.X.X 最新版本。 css-loader 后面版本号加了 ~ ，在安装的时候会匹配修订版最新版，也就是 2.1.X 最新版，不会匹配 2.2.0 及以上。

NPM 的常用命令

下面介绍下 NPM 的常用命令：安装、删除、初始化、配置。

安装和删除

安装某个 NPM 包，使用命令

npm install packageName，

简写

npm i packageName

如果执行命令的目录下有package.json则可以直接用npm install安装package.json中的所有依赖。如果我们要安装某个版本的包，则可以使用命令npm i packageName@x.x.x格式。

还可以这样安装相应的版本

npm install webpack@4
npm install webpack@4.1

如果我们安装依赖包并且将这个依赖写入package.json则可以使用命令npm i packageName --save（简写npm i packageName -S），如果希望写到package.json开发依赖中（devdependencies）则使用命令npm i packageName --save-dev（简写npm i packageName -D）

删除某个 NPM 包，则使用npm uninstall 包名。

更详细的你可以参考

重新安装

npm cache clean --force
rm -rf node_modules
rm -rf package-lock.json
npm install

本地模式和全局模式

npm 的包安装，分为本地模式和全局模式，默认是本地模式，即在执行npm install命令的当前目录创建node_modules，然后下载安装包及其依赖到node_modules目录。全局模式是指安装到全局路径的方式。在 Node.js 的 require 依赖之时，会优先查找自己当前文件的node_modules，如果没有，则循环遍历上层的node_modules，如果便历到根目录还找不到，则会使用全局模式安装的模块，另外全局模式安装的包可以指定全局命令，只需要在package.json增加bin字段并且指向包内对应的文件即可。

全局安装一个包，使用命令npm install --global，--global可以简写为-g。

初始化一个 NPM 项目

npm init 用来初始化生成一个新的 package.json 文件。输入npm init并且根据对应的提示回答问题，会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。
如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

设置 NPM 镜像

由于 NPM 网站经常不稳定，所以国内有很多镜像可以使用，淘宝 NPM 镜像是国内最大的一家 NPM 镜像网站，还有cnpm包可以替换官方 NPM 来使用，使用cnpm直接使用淘宝镜像安装 NPM 包。

NPM 其他常用命令

  • npm set：设置环境变量，例如：npm set init-author-name 'Your name'，初始化的时候会使用默认环境变量；
  • npm info：查看某个包的信息，例如：npm info lodash；
  • npm search：查找 npm 仓库，后面可以跟字符串或者正则表达式，例如：npm search webpack；
  • npm list：树形的展现当前项目安装的所有模块，以及对应的依赖，例如：npm list --global查看全局安装的模块。

NPM Scripts

NPM 不仅可以用于模块管理，还可以用于执行脚本。package.json 文件中可以添加 scripts 字段，用于指定脚本命令，供 NPM 直接调用。例如：

1
2
3
4
5
6
7
// package.json
{
    "scripts": {
        "build": "webpack",
        "start": "node src/scripts/dev.js"
    }
}

在package.json添加上面字段之后，可以直接使用npm run build和npm run start命令了，实际上：

  • npm run build：相当于执行了当前项目中目录下的webpack命令；
  • npm run start：相当于执行了node src/scripts/dev.js。

另外npm run start还可以简写成npm start。

Tips：除了 npm 外，还有一些包管理工具，主要是针对 npm 的下载速度慢、node_modules 混乱等缺点设计的，例如yarn和 pnpm。

请我喝杯咖啡吧～