开发者笔记

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

字数：543 阅读时长：2分钟 阅读：85

在前端这个大生态中，npm有着至关重要的作用。所有第三方包、插件都依赖于npm的package.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、pre和post生命周期

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

当手动执行 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
最后更新： 2023-03-02
本文标题： package.json中`npm scripts`的生命周期
本文链接： https://www.tiven.cn/p/a7460bda/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
欢迎留言，提问 ^_^