课程名称：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。失败时，就不会提交代码