继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第16天 npm scripts 发布到 npm 和代码发布前到检查

flask
关注TA
已关注
手记 45
粉丝 2
获赞 1

课程名称:web前端架构师

课程章节:第13周 第四章

主讲老师:张轩

课程内容:npm scripts 发布到 npm,代码发布前到检查

NPM 的主要功能

从 npm 服务器下载别人编写的第三方包到本地,比如 vue
从 npm 服务器下载并安装别人编写的命令行程序到本地使用,比如 vue-cli
允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用

发布 npm

登陆 npm

npm login

这里需要注意的是如果 npm 全局修改了 registry 地址,需要修改回来。但是这样会影响其他应用的安装速度,我们可以在该项目目录下新建一个 .npmrc 文件来配置 npm 镜像地址

registry=https://registry.npmjs.com/

语义化版本 - semver

说明网址:https://semver.org/lang/zh-CN/
版本格式:主版本号.次版本号.修订号(1.0.0),版本号递增规则如下:

主版本号:当你做了不兼容的 API 修改,
次版本号:当你做了向下兼容的功能性新增,
修订号:当你做了向下兼容的问题修正。

npm files 字段

npm publish时

  • 默认忽略掉 gitingore 中的内容
  • 指示npm publish 的时候需要上传的内容
  • package.json / README.md / CHANGLOG.md / LICENSE 都会包含在其中

在我们发布我们开发的组件时,我们主要就是发布我们打包生成的 dist 目录下的文件,但是开发环境下我们会把 dist 目录添加到 .gitignore 中,我们我们不配置 npm files ,就会导致 dist 目录发布不到 npm 上

npm scripts

在我们使用 npm 发布组件时,我们需要先将组件打包,然后在发布,有时会忘掉,这是我们就可以使用 npm scripts 中的 prepublishOnly

npm scripts 生命周期

  • prepare
    • packed 前运行
    • 安装好前运行
    • 发布前运行
  • prepublish(即将废弃) 发布前运行,与 prepare 一样
  • prePublishOnly 只在发布前运行

所以文件打包命令不适合放在 npm prepare 上,因为它不会只在 npm publish 时触发

npm publish 触发的钩子

  • prepublishOnly
  • prepack
  • prepare
  • postpack
  • publish
  • postpublish

npm pack 该命令会将我们将要上传的包打包成 .tgz 文件

npm pack 出发的钩子

  • prepack
  • prepare
  • postpack

代码发布前检查

我们在代码发布前需要对代码进行检查

npm publish 前验证

我们可以把命令加在 npm prepublishOnly

 "prepublishOnly": "npm run lint && npm test && npm run build"

git 提交前验证

我们可以使用 husky。https://github.com/typicode/husky

安装

pnpm i husky -D

启用 git 钩子

npx husky install

安装后自动启动 git 钩子

npm pkg set scripts.prepare "husky install"

然后 package.json 文件会增加一条命令

{
  "scripts": {
    "prepare": "husky install"
  }
}

创建一个钩子, 例如我们提交代码前要执行 npm run lint

 npx husky add .husky/pre-commit "npm run lint"

然后就可以尝试提交代码,提交代码的时候就会自动执行 npm run lint。失败时,就不会提交代码

图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP