npm总结(一)

本文参考:


前言

随着前端工程的发展,npm已然成为每个前端开发者的必备技能,然而大多数人对它的使用也只是停留在使用npm安装一些依赖包而已。作为全世界最大规模的包管理器,每周大约有30亿次的下载量,npm的功能远不止安装依赖这么简单,本文的目的就是介绍npm更多的功能。

tips:本文 demo 仓库:npm-demo

1. 安装 npm 和管理 npm 版本

npm是NodeJS自带的一个包管理工具,在 NodeJS官网 安装NodeJS后即可使用npm

  • 查看npm版本
$ npm -v
  • 更新npm版本
$ npm install npm@latest -g

2. npm init

该命令的原理是调用脚本(init-package-json),输出一个初始化的package.json文件,package.json中记录了项目中的依赖包的信息(如名称、版本等)。

npm init
package.json

执行npm init每次都会输入如上信息,可以使用npm init --yes快速创建一个带有默认信息的package.json的文件。

3. 安装依赖包

安装依赖包是npm的核心功能,输入npm installnpm会自动从package.json文件中寻找dependenciesdevDependencies下的依赖包,并安装到项目的node-modules文件夹下。

3.1 关于 package

当手动安装一个依赖包时,使用npm install <package>命令即可安装,参数package即是要安装的依赖包名,一般npm会在 默认源仓库 中去查找对应的包名。然而,package不光是一个包名,还有更多的定义方式,参见:Understanding Packages and Modules,以下是package定义的规则:

  1. 包含package.json文件描述该程序的文件夹
custom local package
custom local package 安装
  1. 满足规则(1)的gzip压缩文件
gzip 压缩文件
  1. 可以下载到规则(2)资源的url链接
url 链接
  1. 格式为<name>@<version>,一般是已发布在npm源仓库上的可访问 url,且该url满足规则(3)
<name>@<version>
  1. 格式为<name>@<tag>,通过tag标记获取到version,且满足规则(4)
<name>@<tag>
  1. 格式为<name>,默认添加latest标记获取最新发布版,且满足规则(5)
<name>
  1. 满足规则(1)的git urlgit url 支持格式
git url

按照以上不同规则安装后的package.json文件如下:

package.json

注意:无论以何种方式安装依赖包,npm install时都会去根据package.json文件中的dependencies字段下载它所依赖的相关包

3.2 本地包应用场景

场景模拟如下所示:

  1. 创建一个公共模块common-package-test,存放项目中一些公共的配置或方法
公共模块
  1. src目录下创建一个轮播图列表组件
轮播图组件
  1. 利用webpack打包该文件,并进行测试
webpack 打包
  1. 打开index.html,查看控制台,正常输出
控制台输出

通过以上场景模拟,内容可以正常输出,但是问题在于引用路径一直往上层寻找,这种引用很不利于项目的维护。而且公共模块也确实需要单独分离出来给其他模块引用,为了更优雅的引用,可以利用npm本地包将公共模块封装到node_modules中。

解决方案:

  1. 在公共模块common-package-test下创建一个package.json文件
公共模块 package.json
  1. 利用npm安装本地包
安装本地包
  1. 在轮播图组件重新引入common-package-test模块
引入 common-package-test 模块
  1. 通过 webpack 打包进行测试
控制台输出

3.3 远程 git 仓库包应用场景

场景:使用一个npm包时发现它有bug,也找出了它的问题,并直接在node_modules中修复了它,这样并没有用。因为在.gitignore文件一般会忽略提交node_modules,即node_modules不在版本控制内,即使修复了它,下次下载依赖是还是会覆盖修复。

解决:先在git仓库中fork要修复的npm包,然后在自己的仓库中修复该问题,最后在package.json中引用自己的git url即可解决问题。

4. 工作原理

  • npm2采用的是递归安装的方法,当项目较复杂时,目录结构也会很深,会出现超出windows系统中路径超过260字符的错误;部分相同的依赖包也会被重复安装,造成大量冗余。
  • npm3采用扁平结构优化解决了以上问题,但也导致了npm依赖树不能和文件结构所对应了,可以通过npm ls来查看模块间的依赖关系。
  • npm5依然采用扁平结构,还引入了package-lock.json文件,它可以锁定依赖的安装结构和版本等信息。
package-lock.json

package-lock.json文件主要由versionresolvedintegrityrequiresdependencies几个字段组成。

  • version:包的准确版本号
  • resolved:安装源
  • integrity:完整哈希
  • requires:除最外层的requires属性为true, 其他的requires属性都对应着该依赖包中的package.json里记录的自己的依赖项
  • dependencies:与node_modules文件结构有着一一对应的关系。

使用package-lock.json的好处在于可以锁定安装的依赖包,在另外一台设备上下载依赖会按照锁定版本去下载,这样就不会因为依赖包版本不同而导致一些意外的问题。

5. 依赖包版本管理

5.1 semver

  1. npm采用语义化版本 (semver) 规范进行版本管理。

版本格式:主版本号.次版本号.修订号,版本号递增规则如下:

  • 主版本号:做了不兼容的 API 修改
  • 次版本号:做了向下兼容的功能性新增,
  • 修订号:做了向下兼容的问题修正。
  1. npm提供了网站 npm semver calculator ,可以方便地计算semver的匹配范围。下面列举一些规则示例:
  • ^4.1.3:指定的主版本号下,所有更新的版本
  • ~4.1.3:指定的次版本号下,所有更新的版本
  • >4.1.3:版本号大于4.1.3
  • <=4.3:版本号小于等于4.3
  • 3.1.0 - 4.2.1:版本号在3.1.04.2.1之间
  • >=3.3.1 <3.8.0:与逻辑,版本号大于等于3.3.1且小于3.8.0
  • >4.3.1 || <=2.3.1:或逻辑,版本号大于4.3.1或小于等于2.3.1
  • *:所有主版本
  • 22.*2.x:主版本号为2的所有版本
  • 3.33.3.*3.3.x:版本号为3.3开头的所有版本
  • 5.0.0-alpha:预发布版本
  • 7.0.0-beta.3:预发布版本
  • 1.0.0-rc.3:预发布版本

5.2 依赖包管理建议

  1. 使用npm5.2以上的版本,保留package-lock.json文件
  2. 不要手动修改package-lock.json
  3. 升级小版本依赖包:npm update <package>
  4. 升级大版本依赖包: npm install <package>@<version>
  5. 降级依赖包:npm install <package>@<version>
  6. 删除依赖包:npm uninstall <package>
  7. 当提交了package.jsonpackage-lock.json的更新后,应及时拉取更新,并重新npm install重新安装更新后的依赖

6. npm 脚本

6.1 npm scripts

  1. 使用npm scripts可以在package.json文件中自定义脚本
{
  "script": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

以上代码片段是create-react-app脚手架生成的React项目中的scripts,可以使用npm run命令来执行上面的scripts,执行npm run build就等同于执行对应的npm脚本:react-scripts build

  1. npm脚本原理

当执行npm run命令时,会自动新建一个shell去执行里面的脚本,shell会将./node_modules./bin目录添加到PATH变量中。也就是说,如果./node_modules./.bin目录中的脚本,可以直接调用脚本名,不用去写完整的脚本路径或是全局安装脚本了。

  1. 简写
  • npm startnpm run start的简写
  • npm stopnpm run stop的简写
  • npm testnpm run test的简写
  • npm restartnpm run stop && npm run restart && npm run start的简写
  1. 变量

npm脚本可以通过环境变量process.env的方式获取到运行时的相关变量:

{
  "name": "webpack",
  "version": "3.8.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/webpack/webpack.git"
  }
}

上面的代码片段是webpackpackage.json文件中的部分内容,可以通过process.env对象获取其中的变量。
例如:process.env.npm_package_name返回webpackprocess.env.npm_package_version返回3.8.1process.env.npm_package_repository_type返回git

6.2 npx

  1. 先举个例子,在npm5.2版本以前,如果只是在项目中安装了webpack,打包的时候就需要用./node_modules./.bin/webpack来调用webpack命令来进行打包。调用命令时每次都要输入这么长的路径,会觉得很麻烦,所以一般会在全局安装webpackwebpack-cli,然后直接用webpack命令来打包,这是因为在webpackpackage.json文件中有对bin字段的定义:
"bin": {
  "webpack": "./bin/webpack.js"
}

但是全局安装的webpack命令可能会与项目使用的weboack命令版本不同,也会导致不能成功构建。上一节讲到了npm scripts,这时我们就可以将webpack命令写到npm scripts中,而不需要全局安装了,因为npm run命令能够在执行时把./node_modules/.bin加入到PATH变量中,进而直接调用webpack命令了

npm5.2版本以后,npx很方便地解决了上述问题,直接使用npx webpack就可以去自动寻找项目中安装好的webpack依赖包,然后进行打包

  1. 执行远程npm远的二进制包

npm5.2版本以前,初始化React脚手架项目,需要现在全局安装create-react-app,然后再创建初始化的项目:

npm install -g create-react-app
create-react-app my-app

npm5.2版本后,直接使用npx即可安装并创建初始化项目,这样也就不必全局安装create-react-app了,也不必去检查全局安装的依赖包版本是否过低:

npx create-react-app my-app

6.3 切换不同的Node版本

在以前都是用 nvmn 这样的Node版本管理工具来切换Node版本,而有了npx同样可以在不手动切换Node的前提下,使用不同的Node版本环境:

npx 切换 Node 版本

7. npm 配置

7.1 npm-config

通过npm config ls -l可以查看npm的所有配置,详细的配置说明可在官方文档查看:config | npm Documentation

npm comfig

修改配置命令:npm config set <key> <value>
修改npm仓库源为淘宝镜像源:npm config set registry https://registry.npmjs.org/

7.2 .npmrc文件

上面的修改npm配置是借助命令行来完成的,除了命令还可以通过.npmrc文件来修改配置。

npm读取config配置的优先级:

  • 工程目录下的.npmrc文件(/path/to/my/project/.npmrc
  • 用户配置文件(~/.npmrc
  • 全局配置文件($PREFIX/etc/npmrc
  • npm内置的配置文件(/path/to/npm/npmrc

8. 总结

  • 为了统一配置,项目中的npm config添加到.npmrc文件中
  • 统一node运行环境,package.jsonpackage-lock.json文件
  • 合理使用安装依赖包:npm install <package>|<local file>|<git url>
  • 使用npm5.2以上版本
  • 合理使用npm scriptsnpx管理应用相关脚本

npm的一些基础使用和介绍先到此为止,关于更加详细的使用和其他高级用法请看下一篇文章:npm总结(二)