首页 > 其他分享> 文章详细

npm相关知识整理

2022-07-08 18:03:19 阅读：200 来源： 互联网

标签：npm 依赖 run package 知识 link npx 整理

语义化版本

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发布

第一步，在npm官网进行注册一个账号。
第二步，执行 npm login，输入注册的账号密码完成登录。
第三步，npm i -y 初始化 package 文件，填入最基本的3个字段：name，version 和 main 字段，其中main字段应该是打包后的代码。
第四步，在包目录执行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的，都可以运行。

参考文章

标签：npm,依赖,run,package,知识,link,npx,整理
来源： https://www.cnblogs.com/kanyu/p/16457653.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9