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发布
- 第一步,在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
cd projectPath
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 moduleName
以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的,都可以运行。
参考文章
- https://q.shanyue.tech/engineering/
- https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
- https://www.ruanyifeng.com/blog/2019/02/npx.html
- https://segmentfault.com/a/1190000020082099
- https://blog.csdn.net/xuewenjie0217/article/details/123008562
- https://blog.csdn.net/lw001x/article/details/124133735
- https://juejin.cn/post/7018344866811740173