npm相关知识整理

语义化版本

• major: 重大变化，不兼容老版本

• minor: 新增功能，兼容老版本

• patch: 修复bug，兼容老版本

依赖版本号

• * 匹配最新版本的依赖

• ^ 匹配最近的大版本依赖，比如^1.2.3，会匹配所有1.x.x的包，不包括2.0.0

• ~ 会匹配最近的小版本依赖，比如~1.2.3，会匹配所有1.2.x版本，不包括1.3.0

package入口

如果使用import对库进行导入，会优先寻找module字段引入，然后才是main字段。

{
  name: 'midash',
  main: './dist/index.js', // es module入口
  module: './dist/index.mjs' // commonjs入口
}

package-lock

锁定规则

• 当package-lock.json中的依赖锁定版本符合package.json中的版本号范围时，将以package-lock.json锁死版本号为主。

• 当package-lock.json中的依赖锁定版本不符合package.json中的版本号范围时，将会安装符合package.json版本号范围的最新版本号依赖，并重写 package-lock.json文件

要不要提交package-lock

• 对于项目开发而言，有必要。当有了lock文件时，每一个依赖的版本号都被锁死在了lock文件，每次依赖安装的版本号都从lock文件中进行获取，避免了不可测的依赖风险。

• 对于库开发而言，也有必要。虽然项目中所有依赖都会根据项目lockfile锁死而并不会依照库依赖的lockfile，但是为了贡献者能很容易地将项目跑起来，devDependencies必须在库的lockfile中锁定。

npm脚本原理

• 每当执行npm run xx，就会自动新建一个Shell，在这个Shell里面执行指定的脚本命令。因此，只要是Shell可以运行的命令，一般是Bash，就可以写在npm脚本里面。
• npm run新建的这个Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样，这也就是为什么npm run指向的命令能够被执行的原因。

npm脚本执行

{
  "scripts": {
    "bx": "npm run script1.js & npm run script2.js", // 并行执行（同时执行）
    "abc": "npm run script1.js && npm run script2.js", // 继发执行（即只有前一个任务成功，才执行下一个任务）
  }
}

Windows下不支持这2种方式，可以通过安装npm-run-all、Concurrently模块解决。

npm常用别名

npm add -> npm install
npm create -> npm init

npm发布

1. 第一步，在npm官网进行注册一个账号。
2. 第二步，执行 npm login，输入注册的账号密码完成登录。
3. 第三步，npm i -y 初始化 package 文件，填入最基本的3个字段：name，version 和 main 字段，其中main字段应该是打包后的代码。
4. 第四步，在包目录执行npm publish

npm变量

通过npm_package_前缀，js脚本可以通过process.env对象拿到package.json里面的字段。比如，下面这个package.json：

{
  "name": "foo",
  "version": "1.2.5",
  "scripts": {
    "view": "node view.js"
  }
}

// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5

npm_package_前缀也支持嵌套的package.json字段

// view.js
console.log(process.env.npm_package_scripts_view); // node view.js

npm依赖

• dependencies 生产依赖

• devDependencies 开发依赖

安装命令

npm i --save xxx // 生产依赖
npm i --save-dev // 开发依赖

npm i -S xxx // 生产依赖（简写）
npm i -D xxx // 开发依赖（简写）

是否要严格区分生产和开发？

• 当进行项目开发时，并无必要。因为打包时，依靠的是Webpack/Rollup对代码进行模块依赖分析，与该模块是否在dep/devDep并无关系，只要在 node_modules上能够找到该依赖即可。

• 当进行库开发时，有必要。因为当在项目中安装一个依赖库时，只有该依赖的dependencies会被安装到node_modules中，devDependencies不会，因此这里如果不区分，会导致开发项目报错受影响。

npm钩子

npm钩子，也称npm生命周期。npm默认提供pre和post两个钩子，当我们执行任意npm run脚本时，都将自动触发pre/post的钩子但是这2个钩子的内容需要由你自定义。

{
  "scripts": {
    "preabc": "xxx",
    "abc": "xxx",
    "postabc": "xxx"
  }
}

当你执行npm run abc时，会自动按照下面的顺序执行

npm run preabc -> npm run abc -> npm run postabc

一些常用npm脚本，如：publish、install、uninstall、version、test、stop、start和restart，同样支持自定义这2个钩子。

npm restart

npm restart是一个复合命令，实际上会执行三个脚本命令：stop、restart、start。具体的执行顺序如下：

prerestart
prestop
stop
poststop
restart
prestart
start
poststart
postrestart

npm publish

npm publish发包的生命周期比较复杂，当执行npm publish命令，将自动执行以下脚本：

prepublishOnly: 最重要的一个生命周期，如果你需要在发包之前自动做一些事情，如测试、构建等，可以在这里完成。
prepack
prepare
postpack
publish
postpublish

prepare钩子

一个最常用的生命周期钩子，它的执行时机：

• npm install 之后自动执行

• npm publish 之前自动执行

常用的git hook工具husky通常就被放置在这个钩子里执行

{
  prepare: "husky install";
}

npm_lifecycle_event变量

npm提供一个npm_lifecycle_event变量，返回当前正在运行的脚本名称，比如pretest、test、posttest等等。所以，可以利用这个变量，在同一个脚本文件里面，为不同的npm scripts命令编写代码。

const TARGET = process.env.npm_lifecycle_event;

if (TARGET === 'test') {
  console.log(`Running the test task!`);
}

if (TARGET === 'pretest') {
  console.log(`Running the pretest task!`);
}

if (TARGET === 'posttest') {
  console.log(`Running the posttest task!`);
}

npx

npm 从5.2版开始，增加了npx命令，可以提升开发者使用包内提供的命令行工具的体验，它有很多用处。

方便调用项目安装的模块

通常我们安装完npm依赖或脚手架后，需要将其写入package.json的scripts字段里面，运行npm run xxx才能执行，npx就是想解决这个问题，利用npx，我们可以直接调用运行。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name t3-ui ./src/components/index.js",
    "lint": "vue-cli-service lint"
}

我们用npx命令的话， 就不需要在写scripts里面的内容， 直接在控制台执行npx vue-cli-service serve，就会直接寻找本地依赖并执行。

避免全局安装模块

运行npx命令后，npx会将依赖下载到一个临时目录，使用以后再删除

npx uglify-js@3.1.0 main.js -o ./dist/main.js // 临时下载压缩包，执行压缩

npx http-server // 临时在当前目录，安装并运行起本地服务器

使用不同版本的node

npx -p node@6 npm run serve

执行逻辑如下：

• npx下载node@6版本
• 将执行的node版本切换为node@6版本
• 使用node@6执行npm run serve
• 命令执行完毕后，删除下载包，最终不会改变本地的使用版本

npx命令执行逻辑

先自动查找当前依赖包中的可执行文件，如果找不到，就会去PATH里找，如果依然找不到，就会帮你临时安装，执行完后再删除包。

npm init

命令用法：

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

npm init xxx时，会自动转换成如下npx命令：

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

以vue3官方安装为例，命令实际效果如下：

// 实际安装的是create-vue@latest包
npm init vue@latest -> npx create-vue@latest

npm exec命令和npx作用相同，区别仅在于后者会将其后面的标志和选项都会优先设置为位置参数，具体可对照npm文档。

npm link

简而言之，就是可以将你本地的npm开发包当作是已经npm install好后的包使用了，用来在本地项目和本地npm模块之间建立连接，方便关联到项目中进行修改/调试。

局部link

项目和本地npm模块在同一个目录下，可以使用相对路径进行link

npm link ../module   // 然后，你本地项目的node_modules就出现了该module的软链接

全局link

1.注入全局link

cd modulePath
npm link // 然后，全局node_modules目录下就出现该module的软链接

2.引入全局link

cd projectPath
npm link module

解除link

解除局部link

cd projectPath
npm unlink module

解除全局link

cd modulePath
npm unlink

以vite为例

如果你迫不及待想要体验最新的功能，可以自行克隆vite仓库，然后到本地机器上然后自行将其链接

// 第1步，克隆并进入目录
git clone https://github.com/vitejs/vite.git
cd vite

// 第2步，安装vite作为npm开发包的依赖，然后打包出开发者需要的vite
pnpm install
cd packages/vite
npm run build

// 第3步，全局注入link
npm link

// 第4步，进入本地项目，引入link，这个时候就相当于全局安装了vite，类似于执行了vite官方安装命令：npm create vite@latest
pnpm link --global vite

// 第5步，package文件的script内dev写入vite命令
dev: 'vite'

// 第6步，执行npm命令
npm run dev

实际测试发现，使用link后，第5和第6步是多余的，本地可以直接在控制台使用vite命令，不管你是全局link的，还是局部link的，都可以运行。