package.json scripts
2022-09-16
731 字约 3 分钟
...npm 脚本有pre和post两个钩子。举例来说,build脚本命令的钩子就是prebuild和postbuild。
`"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script"`
用户执行npm run build的时候,会自动按照下面的顺序执行。
`npm run prebuild && npm run build && npm run postbuild`
因此,可以在这两个钩子里面,完成一些准备工作和清理工作。下面是一个例子。
`"clean": "rimraf ./dist && mkdir dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production webpack"`
npm 默认提供下面这些钩子。
- prepublish,postpublish
- preinstall,postinstall
- preuninstall,postuninstall
- preversion,postversion
- pretest,posttest
- prestop,poststop
- prestart,poststart
- prerestart,postrestart
自定义的脚本命令也可以加上pre和post钩子。比如,myscript这个脚本命令,也有premyscript和postmyscript钩子。不过,双重的pre和post无效,比如prepretest和postposttest是无效的。
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!`);
}``
注意,prepublish这个钩子不仅会在npm publish命令之前运行,还会在npm install(不带任何参数)命令之前运行。这种行为很容易让用户感到困惑,所以 npm 4 引入了一个新的钩子prepare,行为等同于prepublish,而从 npm 5 开始,prepublish将只在npm publish命令之前运行。
八、简写形式
四个常用的 npm 脚本有简写形式。
npm start是npm run start
npm stop是npm run stop的简写npm test是npm run test的简写npm restart是npm run stop && npm run restart && npm run start的简写
npm start、npm stop和npm restart都比较好理解,而npm restart是一个复合命令,实际上会执行三个脚本命令:stop、restart、start。具体的执行顺序如下。
- prerestart
- prestop
- stop
- poststop
- restart
- prestart
- start
- poststart
- postrestart
如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →前端2026-07-17
HTML Form 可以把 POST 响应加载进 iframe
在接入支付验证、身份认证或第三方授权页面时,我们经常会遇到这样的流程: 1. 后端返回一个第三方接口地址。 2. 这个地址必须通过 请求访问。 3. 接口返回 HTML,或者重定向到真正的验证页面。 4. 验证页面需要嵌入当前网站,而不是打开新标签页。 5. 验证完成后,当前页面继续执行后续业务。 第一次遇到这个需求,很容易想到: 但涉及第三方支付时,这种方式通常会遇到 CORS、Cookie、重定向和跨域页面读取限制。 实际上,HTM...
学习
前端2026-05-29
前端判断一个网页是否允许被 iframe 内嵌
前端 不能 100% 准确提前判断 一个网页是否允许被 iframe 内嵌,因为决定权主要在目标网站返回的 HTTP 响应头 里,而普通前端 JS 通常读不到跨域页面的响应头。 核心判断看这两个东西: 1. 老一点但仍常见。 表示完全不允许被 iframe 嵌入。 表示只允许同源页面 iframe 嵌入。 以前有这个,但现代浏览器支持很差,基本不建议依赖。 2. 现在更推荐看这个。 表示不允许任何页面嵌入。 表示只允许同源嵌入。 表示只...
学习
前端2026-03-20
网页唤起 Android App 调试笔记(App Links)
在最近的项目中,我遇到了 网页访问特定 URL 应该唤起 Android App,但实际只打开网页 的问题。通过调试和排查,整理出以下经验和步骤。 1\. 项目与环境信息(脱敏处理) 网站域名: 唤起页面: Android App 包名: intent filter 配置示例: assetlinks.json 已上线,包含 App 的 SHA256 签名指纹 2\. 问题现象 用户访问 页面时, 网页打开了,但 App 没...
学习
前端2026-03-02
深入理解 Cookie:安全属性、访问边界与渲染场景实践
本文系统梳理 Cookie 核心机制,聚焦 HttpOnly/SameSite 等安全属性 、 访问权限边界 、 CSR/SSR 差异 ,附关键代码示例与安全清单。适合开发查阅与知识沉淀。 一、Cookie 是什么?为什么需要它? HTTP 是无状态协议。Cookie 是服务端通过 响应头下发、浏览器自动存储并在后续 同源请求中携带 的小型文本数据(通常 ≤4KB),用于: 会话维持(Session ID) 用户偏好(语言/主题) 跨请...
学习
前端2026-03-02
退出登录时 Cookie 清除指南
核心结论 :登出 ≠ 单方面操作。HttpOnly 与非 HttpOnly Cookie 需 前后端协同清除 ,缺一不可。残留 Cookie = 安全隐患 + 用户体验漏洞。 🔒 为什么不能“一键清空”? 浏览器出于安全设计: 后端 :只能通过 响应头清除 自己设置过 的 Cookie(需属性完全匹配) 前端 JS :可读写非 HttpOnly Cookie,但 无法触碰 HttpOnly Cookie 无“清除全部”API :任何服...
学习
前端2025-12-15
懒加载图片在同一个 Item 中逐个出现的原因与解决方案
懒加载图片在同一个 Item 中逐个出现的原因与解决方案 适用场景 :使用原生 实现图片懒加载的动态列表,每个列表项(item)包含多张图片。 📌 问题描述 在开发一个动态渲染的列表时,每个 item 中包含三张图片,并使用 HTML 原生的懒加载属性: 观察到的现象: 开启懒加载时 :三张图片 不是同时出现 ,而是 从左到右(或从上到下)依次加载显示 ,有明显的时间差。 关闭懒加载(移除 )后 :三张图片 看起来是一起出现的 ,视觉...
学习
评论
请登录后发表评论
去登录