不再让 npm 成为面试绊脚石了

前端 0 496

前语

Hello 大家好！我是壹甲壹！

关于往常只会用到简单的 npm 指令的我来说，面试的时候就被考官按在地上摩擦过

  • 请问 package.json 中版别 ~1.2.3和^1.2.3 有什么区别？
  • 请问履行1 7 g r O npm install 时，是怎样装置依靠: ` A 9 2 Q % m包的？相同的依靠包怎样处理？

面试结果可想而知，于是便有了这篇文章，好好总结下 npm 相关的知识啦

一、npm 装置

当咱们在装置 node 后，npM 4 N f n t * H Jm 也会一同装置好，此刻需求别的两个包来帮忙开发

  • nvm 办理 node 版别
  • nrm 办理 npm 的源，国内一般都运用w / d Q taobao 或 cnpm 源

详细装置信息，请参阅 Node.js的3m装置法

二$ # p F、npm 指令

2.1 npm init

npm init 指令用来初始化项目

  • 直接履行 npm init, 会顺次问询 name, veg t $ 3 h h Vrsion, description 等配置信息，比较费事
  • 添加 --yes 或 -y 后缀，直接生成 package.json 文件，配置信$ H _ (息运用默许值 (默许值在 npm config 中定义), 可手动修正

关c E e 2 J , [ m 8于每个项目而言，例如 author.name , author.email 都是固定的，能够给这些字段设置默许值

// 检查一切配置信息
npm config list --json

// 设置默许值
n] z 8 H W l y n npm config set init.author.naC 3 me "userName"
npm config seP ~ K V ~ e ^ b ut init.+ w 3 7 @ { Kauthor.email "uses k J 5 l F a Q rEma2 $ M / V [  :il"

接下来，履行 npm init -y, 生成的 package.json 文件如下

{
  "name": "pkg-a",
  "version": "1.0.0",
  "description": "",
  "scriptsq e I": {
    "test": "echo "EK U [ m ` j q f irror: no test specified" &@ s = I f V Q Oamp;& exit 1"
  },
  "keywords": [],
  "authG F 7or": "userName &6 R n M T S O n 7lt;userEmail>",
  "license": "ISC"
}

2.2 npm install

npm install 指令用来大局装置或本地装置第三方的依靠。npm install 简写为 npm i

2.2.1 global

npm i create-react-app -g 会进行大局装置，装置成功后，可在终端任何地方运用 create-react-app 指令。

  • 大局装置途径

履行 npm root -g 输出大局装置途径为

/Users/xxx/.nvm/versions/node/v14.2.0/lib/node_modules

(Tip: 此刻能够看出 nvm 办理node 版别时，每个版别都有关于的 node_modules )

  • 大局运用

之所以能够大局运用，是因为将 xxx/v14.2.0/lib/node_modules 目录下每个依靠的可履行@ V a y [ g文件软链接 到 xxx/v14.2.0/bin 目录下。

每个依靠包的可履行文件在其 package.json 文件中的 bin 字段指定

{
 "name": "create-react-app",
 "bin": {
    "create-react-3  Q , u * o w capp": "index.js"
  }
}

那么，在 xxx/v14.2.0/bin 目录就会创立y j T ( b & u create-react-app 指令，在履行该指令时，便是在履行 index.js 文件

2.2.K G a i ! h B s ,2 local

nph v |m i mom^ e L q ] ` Zent --save 会在当时项目进行装置，装置成功后，需求在项目中引进后，才能运用k k @ J ) Z 9 l #

依靠来源

npm i 默许会从 npm registry 上去下载依靠的模块 （运用 nrm 切换），除此之外，还有哪a i ] | u些装置途径呢H ; e 0？

  • from folder
    能够从本地的文件夹中装置 pkg。本地创立 pkg-a 文件夹，并经过 nj { 1 = f 6 lpm init -y 进行初始化，接下来履行 npm i ~/pkg-a 就: U l h能够装置了，n b ` C b $ x v成功之后 p_ A G w 1kg-m l ua的值为相对链接W 9 a Y m的 file 协议地址
不再让 npm 成为面试绊脚石了
npm_inst~ K 3 { ! ;all_floder.png
  • from taL Y 8 I f wrball
    关于的本地模块 pkg-a, 履行 npm pack 指令就可对其打包了
    不再让 npm 成为面试绊脚石了
    接下来，就能够履行 npm i ~/pkg-a/pkgl 0 !-a-1.0.0.tgz 装置模块了，装置成功后~ , y 8 a # I b Upkg-a的值为相对链接的 file 协议地址
    不再让 npm 成为面试绊脚石了

npm install tarball 比[ 6 !较适合离线装置包或许包不想发布的 npm 源上，但需求手动维护

  • from http(s) url
    前面介绍的是本地包，关于已经发布的依靠，例如 react，运用 npm viG J ~ P r 8 g ` [ew react 能够检查最新版别的 re) * K Z F , Y $act 压缩包地址

不再让 npm 成为面试绊脚石了
此刻能够直接运用 npm install [https://r.cnpmjs.org/react/download/react-16.13Q x ) r H.1.tgz](https:m ^ 7 x b//r.cnpmjs.org/react/download/react-16.13.1.tgz) 来装置 react。装置完| w p * m K 4 L成后，在 package.json 中 react 值为 https 地址
不再让 npm 成为面试绊脚石了npm install http(s) 比较适合不想发布的 npm 源上,但需求别人也能装置

  • from git

咱们还能够从 git 上装置，还以 react为例，履行 npm i [https://github.com/facebook/rJ E h 6 i ) jeact.git](https://github.com/facebook/react.gi} q et) 来装置
不再让 npm 成为面试绊脚石了
以上便是其它的几种 npm install 方法，在日常开发中还是推荐从 npm 源上面装置依靠M t v

依靠分类

关于不同的依靠功用不同，常见会将依靠分红 开发环境依靠 和 出产环境依靠，例如 babeli t } 属于开发依U D ~ a靠，而react 就属于出产依靠了。在 npm install 时能够添加不同的后缀来区别依靠，--savej 8 } (-S) 标明出产依靠，下载的依靠会保存到 package.json 的 dependencies 字段中，而 --save-devG ) w & (-D) 标明开发依靠，会保存到 devDependencies 字段i b ]中。

在 npm 5 中，不添加后缀，下载的依靠默许会保存到 dependencies

除去 -S -D后缀，npm install 还存在以下后缀

  • -P: --save-prod , 当保存到 dependencies字段中, 当不存在 -D 或 -O时， -P便是默许值
  • -O: --sav[ F } 8e-optional , 保存到 optionalDependencies字段中
  • --no-save, 将不会进行保存
  • -B: --save-bundle , 不只| ^ H [ F保存到 dependencies字段，还会保存到 bundleDepeni S Vdencies 列表中c { 0 (可选)
  • -E: --save` o Z h & R `-exact , 不只保存到 dependenciesC 2 p = @ z字段，还会确定 pkg 的精确Y Z m = l |版别，而不是] = A A 7 P 4 8 9运用一个规模
    不加 -E，版别 ^16.13.1 是一个规模，标明的是 >=16.13.1 < 17.0.0 这个规模
    不再让 npm 成为面试绊脚石了
    加上 -E , 就会确定 react 的版别
    不再让 npm 成为面试绊脚石了

（Tips: 关于 depended : @ 4 # ) P W Tncies 这些字段，以及 ^16.13.1标明的详细版别规O ! w m = M v模，后续 package.json 中会解说）

装置方位

本地装置是，一切的依靠都会放到 ./node_/ t A P f % R _module/ 文件夹下面，同时每个依靠的可履行文件都会软链接到 ./node_module/bi5 k Qn/ 目录下，这样就能够在} 0 I pa w + 1 ? ;ackage.json 中设置C ` : # f script 时运用到这些指令，如
不再让 npm 成为面试绊脚石了

2.2.3 How to Work?

当仅履行 npm install 时，npm 会根据 package.json 来装置项目依靠，到底是怎么作业的呢？
这部分请参阅 npm install 怎么作业 – node_modules 目录结构
总结如下，若想实践，可经过下面 Tips来切换 npm 版别

  • **npm 2
    ** 递归装置依靠

缺陷：重复装置相同版别的依靠1 o ! a R ?包
Tips: 履行 nvm instaN t 2 l ~ll/ G P n * f z f 4.2.0 后，nodT W * Z re 版别 4.2.0 ，npm 版别 2.14.7

  • npm 3
    扁平化办理,     在装置时遍历整个依靠树，计算出最合理的文件夹装置方法, 防止重复装置

Tips: 履行 nvm install 6.9.0 后，node 版别 6.9.0 ，npm 版别 3.10.8

  • npm 5

添加 package.json 文件, 确定依靠版别，0 L ] H –保证任何环境运转/ y a 0 y npm install 得到相同的 node_modules 结 构。禁用指令 npm config set package-lock false

2m q b.3 npm view(info)

npm view(info)y o q F ) ? Z P xxx ,检查包 xxx 的一些信息，最新安稳版别，在线压缩包地址，依靠等信息。

2.4 npm home(docs)

npmV 7 x C N D x $ % home(docs) xxx ，都会打开在线 github 地址，前提需求在包 xxx 的 package.json 文件中设置 homepage 字段

2.5 npm repo(bugs)

ns | $ *pm repo(bugs) xxx, 跳转到对应的 github repo页面，前语也是需求配置

2.6 npm ls

显现依靠 tree

三、package.json

一个项目s *的悉数信息都在 package.json 文件中了，详T E 8细看下有哪些特点吧

3.1 必备特点

如果该项目打包发布到 npm 源上，那么 name 和 version 两个字段是有必要的

3.2 version

版别号有必要能够被 node-semver 正确解析。

3.2.1 版别号

规范版别号格局为： X.Y.Z , 有下面几点说明

  • X.Y.Z 均为非M B W Z [ O {负整数，X: 主版别号、Y：此版别号、Z：修订号。每个元素顺次递增
  • 任何修正都要用新的版别号发布
  • 当 X 为 0 时（0.y.z），此刻属于开发初期，任务公共API 都可能改动，属于非安稳期。1.0.0 用于界定公共 API 的形成
  • 修正 Z, 有必要在做了向下兼容的修正时才递增，例如 修正 bug
  • 修正 Y, 有必要在有向下兼容的新功用时才递增，当 YF 5 e 修正后，Z 有必要归 0
  • 修正 X, 有必要在有任何不兼容的修正被加入公共 API 时递增，当 X 修正后， Y, Z 有必要归 0

**

3.2.2 预发版别号

eg: 2.1.0-beta.1

  • alpha()：预览版，或许叫内部测试版
  • beta()：测试版，或许叫公开测试版
  • rc(release candidate)：终究测试版别

预发版别标明当时版别并非安稳，可能不符合要求。

3.2.3 版别号优先级

版别优先级也[ – Y b便是指版别的凹凸

  • 首要记住 2.1.0-beta 的优先级低于 2.1.0 ，先有预发，再有安稳；
  • 关于正g ^ 5 K . y l s L常版别格局 X.Y.Z ，都是数值，比较每一位巨细就OK；
  • 而关于预发版别，有数字比数值巨细，非数字比较每个字符的 ASj R h o oCII 巨细；

所以： 1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-G w 3 B g J [ kbeta.11 < 1.0.0-rc.1 &l^ t g = f 7t; 1.0.0

3.2.4 规模版别号

（1）运算( s y符：> , >=, <, <=
  • 正常：>= 1.2.7 , 那么匹配的版别能够是 1.2.7，1.2.8，3.4.2
  • 预发：>1.2.3-alpha.3，那么匹配的版别的 X.Y.Z 有必要是 1.2.3
（2）字符规模：X.# ; C ( q w 0 AY.Z – A.I _ L } 8 T [ rB.C
  • 1.2.3 - 2.3.4 , 那么匹配的版别规模是 >=1.2.3 <=2.3.4
  • 1.2 - 2.3.4，第一个版别缺失，会进行补零，所以匹配的版别规模是 >=1.2.0 <=2.3.4
  • 1.2.3 - 2.3，第二个版别缺失，会要求匹w 8 5 X ) 6配的版别c 4 C A x R的 X.Y 两位不得大于 2.3，也便是 <7 } ^ G 1 a 2.4.0, 所以版别规模是 >=1.2.3 <j O 6 E : )2.4.0,
（3）X-Range: 1.2.X , 1.2.) ^ b F X d )x, 1.2.*
  • * , 匹配任意版别，也便是 >= 0.0.0
  • 1.2.x ，匹配的版别 X.Y 两位不变，所以版别规模是 >=1.2.0 < 1.3.0
  • 1.x ，匹配的版别 X 位不变，所以版别规模是 >=1.0.0 < 2.0.0
（4）Tilde Ranges : ~

如果Y被指定，则答应Z被改动；如果没有，答应Y被改动

  • ~1.2.3 , Y 被指定为 2, 那么匹配的规模为 >=1.2.3 <1.3.0
  • ~1.2, Y 被指定为 2, 那么匹配的规模为 >=1.2.0 <1.3.0
  • ~1, 没有指定 Y, 那么 Y 能够被改动，匹配的规模为 >1.0.0 <2.0.0
（5）Garg _ y Qet Ra: d c C [ qnge: ^

匹配的版别，会保证最左面的第一个非 0 位不修正

  • ^1.2.3, 最左面非 0 位为 X 位，所以匹配的规模为 >=1.2.3 <2.0.0
  • ^0.2.3, 最左面非 0 位为 Y 位，所以匹, f @ x s y 0 O配的规模为 >=0.2.3 <0.3.0
  • ^1.2.x , 当版别缺失，缺失位会降到 0 ，所以匹配的规模位 >=1.T 7 ?2.0 <2.0.0

3.3 dependency

3.3.1 dependencies

出产环境依靠，对应 npm install 时后缀 -S

3.3.2 devDependencies

开发环境依靠，对应 npm instal# B 7 j ^ n t N Wl 时后缀 -D

3.3.3 peerDependencies

平等依靠，如果装置了依靠包 pkg-a, 最好也装置下 pkg-a 对应的依靠

// pkg-a package.json
{
 "peerDependencies": {
    "jquery": "2.2.0"
  }
}

上面标明 pkg-a 的运转依靠于 jquery，所以当 npm install pkg-aa m k y U 时，控制台会提示以下信息
不再让 npm 成为面试绊脚石了
在 npm 2.x 版别时，peerDe. % L o U 0 Fpendencies 会被强制装置，3.0 版别后不被强制装置

3.3.4 bg u . O ( b yundleDepenq s # ^ h M @ # ?dencies

绑缚依靠, 也叫 bundledDependencies，特点值是个数组

// pkg-a package.json
{
 "bundledDependencies": [
   "moment"
  ]
}

当 npm pack 时会将绑缚依靠一同打包，在装置 tgz 压缩包时，绑缚依靠也会被装置。但注意绑缚依靠并没有指定版别号

3.3.5 optionalDependencies

可选依靠，特点值为对象。当项目依靠 pkg A, 但 pkgA 装置失败或许找不到并不会影响项目的运转，就能够在 opq H s f ptionalDe…. 中指定 pkgA 了

3.4 homepage

指定项目主页，设置后h o K X j D 2可经过 npm docs(n | A = x %info) xxx 打开

3.5 bugs

指定项目 issues 页面,} + – E 设置后经过 npm bugs xxx 可打开

3.6 license

不再让 npm 成为面试绊脚石了
截屏2020-07-10下午2.21.2+ d I _6.r ] u E Q U Bpng

3.7 main

指定项目进口文件，当 require(xxx) 时，返u b f回的便是进口文件导出的内容

3.% t . # ; v x M8 bin

当 pkg 中的可履行文件需求装置到 PATH 中! & F # B K )，可在 bin 中指定。以 http-server 为例

"bin":K X ; Z e b e @ {
  "http-server"u E .: "./bin/http-server",
  "hs": "./bin/http-server"
}

当 http-server 大局装置，会将履行文件软连接到 xxx/node/v14.2.0/bin/http-server 中，本地装置就会链接到 ./node_module/bin/http-server7 $ u & l . s 中。
可履行文件需求在文件顶部添加 #!/usr/bin/env node 指定 node 履行

3.9 config

设置 config 可经过 npm_package_config_xxx 来获取，但同名变量会被本地 npm config 所覆盖

3.10 script

这部分请参阅 阮一峰 npm scripts 运用指南

四、npx

npx 指令是 npm v5.2 之后引进的新指令，npx 能够帮咱Y G ^ 5 j o e o H们直接履行 node_T 4 b p qmodules/.bin0 p D文件夹下的文件

  • 履行脚本
npx webpack

这样就省掉了配置f k ! y , f xscripts脚本

  • 防止装置大局模块

大局装置的模块会^ q A 1 | l ]带来许多问题，例如：多个用户大局装置的模块版别不同

npx create-react-app react-project

咱们能够直接运用 npx 来履行模块，它会先进行装置，装置履行后会将下载过的模块删除，这样能够一向使
最新版别

五、npm 发布

npm 包的发布比较简单

  • 首要G n } } Z ~运用 nrm 切换到 npm 官方源
  • 运用 npm login 进行登录（提前注册）
  • npm publish (保证 name 是仅有值)
  • 关于不想打包的可在 .npmignore 文件中进行疏忽

六、参阅链接

  • docs.npmjs.com/cli-documen…
  • 前端秃头指南之npm
  • npm scripts 运M 1 V I _ i Q用指南

本文运用 md~ ^ 3 `nice 排版

上一篇 Android多线程基础知识
下一篇 Serverless Registry 设计解读与实战

相关文章