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