package.json中`npm scripts`的生命周期


字数:470 阅读时长:2分钟 阅读:85

前端这个大生态中,npm有着至关重要的作用。所有第三方包、插件都依赖于npmpackage.json文件,其中npm scripts包含多种生命周期,可以组织整个前端工程的工具链。

NPM Scripts

以Vite构建工具,来讲解npm scripts的生命周期。

1、package.json

  • 项目初始化的package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"name": "vite-vue-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}
  • 配置 scripts 脚本命令
1
2
3
4
5
6
7
8
9
{
"scripts": {
"dev": "vite",
"prebuild": "npm run dev",
"build": "vite build",
"postbuild": "npm run serve",
"serve": "vite preview"
}
}

2、prepost生命周期

当我们执行任意 npm run xxx 脚本时,将依次自动触发 prepost 的生命周期。

当手动执行 npm run build 打包时:

  1. 在此之前会自动执行 npm run prebuild,相当于执行了 npm run dev 命令来启动本地服务。
  2. 在此之后会自动执行 npm run postbuild,相当于执行了 npm run serve 命令来启动dist静态文件的预览服务。

执行npm run build等价于依次执行了以下三个脚本命令:

1
2
3
4
5
6
7
// 自动执行
npm run dev

npm run build

// 自动执行
npm run serve

3、内置 scripts

除了可自定义 npm script 外,npm还附带许多内置 scripts

1
2
3
4
5
npm install

npm test

npm publish

3-1、npm publish的生命周期

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

  • prepublishOnly: 最重要的一个生命周期。
  • prepack
  • prepare
  • postpack
  • publish
  • postpublish

如果需要在使用npm publish发包之前自动做一些事情,如测试、构建等,一般在 prepulishOnly 命令中配置完成。

1
2
3
{
"prepublishOnly": "npm run test && npm run build"
}

3-2、比较常用的生命周期:prepare

执行时机:

  1. npm install 之后自动执行
  2. npm publish 之前自动执行

欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-11-02
最后更新: 2022-04-14
本文标题: package.json中`npm scripts`的生命周期
本文链接: https://www.tiven.cn/p/a7460bda/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^