前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >package.json中script的生命周期

package.json中script的生命周期

作者头像
小小杰啊
发布2022-12-21 21:40:31
7670
发布2022-12-21 21:40:31
举报
文章被收录于专栏:Dimples开发记Dimples开发记

# 引言

在前端的大家庭当中,有着各种各样的包管理工具,如:npm、yarn、pnpm 等等,使用它们能够很好的管理我们项目中的各种依赖,同时执行 package.json 文件中 script 中执行的运行脚本,当我们使用npm run xxx之类的命令,运行这些定义在 script 当中的脚本时,它还会自动执行一些生命周期钩子命令。

# package.json

# 1、项目搭建

package.json 文件是我们每个项目当中必须指定的,我们就以下面的 package.json 为例进行测试

代码语言:javascript
复制
{
  "name": "test-script",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "pretest": "node test.js",
    "posttest": "node test.js",
    "test": "node run.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3"
  }
}

同时在项目的根目录下新建两个 js 文件,一个是 test.js,一个是 run.js,这两个文件中的内容如下:

代码语言:javascript
复制
// test.js
console.log('this is test.js')
代码语言:javascript
复制
// run.js
console.log('this is run.js')

# 2、运行 script 命令

到这里我们的项目就搭建完毕了,接下来我们测试一下运行 npm run test 命令,看看会发生什么事情。

代码语言:javascript
复制
$ npm run test

可以看到如下的命令行输出:

# 3、pre 和 post 生命周期

当我们执行任意 npm run test 脚本时,会自动执行 prepost 生命周期钩子,具体如下:

代码语言:javascript
复制
# 第一步
npm run pretest

# 第二步
npm run test

# 第三步
npm run posttest

# 4、内置 script 命令

除了我们自定义的 script 命令之外,npm 等包管理工具也提供了一些内置的 script 命令,如:

代码语言:javascript
复制
npm install

npm test

npm publish
# 4.1、npm publish 的生命周期

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

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

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

代码语言:javascript
复制
"scripts": {
  "prepublishOnly": "npm run test"
}
# 4-2、比较常用的生命周期:prepare

执行时机:

  • npm install 之后自动执行
  • npm publish 之前自动执行
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 引言
  • # package.json
    • # 1、项目搭建
      • # 2、运行 script 命令
        • # 3、pre 和 post 生命周期
          • # 4、内置 script 命令
            • # 4.1、npm publish 的生命周期
            • # 4-2、比较常用的生命周期:prepare
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档