极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 简述 npm script 的生命周期

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 740 (opens new window)

在 npm 中,使用 npm scripts 可以组织整个前端工程的工具链。

{
  start: 'serve ./dist',
  build: 'webpack',
  lint: 'eslint'
}

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

npm install

npm test

npm publish
  1. 在某个 npm 库安装结束后,自动执行操作如何处理?
  2. npm publish 发布 npm 库时将发布打包后文件,如果遗漏了打包过程如何处理,如何在发布前自动打包?

这就要涉及到一个 npm script 的生命周期

# 一个 npm script 的生命周期

当我们执行任意 npm run 脚本时,将自动触发 pre/post 的生命周期。

当手动执行 npm run abc 时,将在此之前自动执行 npm run preabc,在此之后自动执行 npm run postabc

// 自动执行
npm run preabc

npm run abc

// 自动执行
npm run postabc

patch-package (opens new window) 一般会放到 postinstall 中。

{
  postinstall: "patch-package";
}

而发包的生命周期更为复杂,当执行 npm publish,将自动执行以下脚本。

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

当然你无需完全记住所有的生命周期,如果你需要在发包之前自动做一些事情,如测试、构建等,请在 prepulishOnly 中完成。

{
  prepublishOnly: "npm run test && npm run build";
}

# 一个最常用的生命周期

prepare

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

比如 husky

{
  prepare: "husky install";
}
Last Updated: 11/27/2021, 10:11:48 AM