npm总结（一）

2018-09-08  本文已影响0人  双面小Q

本文参考：

前言

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

tips：本文 demo 仓库：npm-demo

1. 安装 npm 和管理 npm 版本

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

$ npm -v

$ 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 install，npm会自动从package.json文件中寻找dependencies，devDependencies下的依赖包，并安装到项目的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 url（git 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. 工作原理

package-lock.json

package-lock.json文件主要由version，resolved，integrity，requires，dependencies几个字段组成。

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

5. 依赖包版本管理

5.1 semver

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

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

  1. npm提供了网站 npm semver calculator ，可以方便地计算semver的匹配范围。下面列举一些规则示例：

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.json，package-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. 简写
  1. 变量

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

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

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

6.2 npx

  1. 先举个例子，在npm5.2版本以前，如果只是在项目中安装了webpack，打包的时候就需要用./node_modules./.bin/webpack来调用webpack命令来进行打包。调用命令时每次都要输入这么长的路径，会觉得很麻烦，所以一般会在全局安装webpack和webpack-cli，然后直接用webpack命令来打包，这是因为在webpack的package.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版本

在以前都是用 nvm 或 n 这样的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配置的优先级：

8. 总结

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

上一篇 下一篇

猜你喜欢

热点阅读