# 自动更新版本号示例 > ~~也许也不是很自动~~ 经过了一小段时间选型放弃了以下方法: - `git hook pre-commit` 无法同步到远程仓库所有人强制使用 - `npm standard-version` deprecated了,悲。而且依赖于[约定式提交](https://www.conventionalcommits.org/zh-hans/v1.0.0/),我不确定能不能让大伙习惯使用这套东西 - `npm commit-and-tag-version` `npm standard-version`的fork持续维护版本 同上 - `google release-please` 只支持github 最后还是直接用了npm原生命令`npm version` 原理如下: 使用`npm version patch`会增加最后一位版本号,并且自动commit ~~没了~~ ## 步骤 ### 需要打包的项目 vue-build / vite-build / uni-h5 / taro-h5 ... - 在`package.json`中的`scripts`添加对应命令,比如原来是`"build:h5": "uni build"`, 添加一个 `"patch-build:h5": "npm version patch && uni build"`或者你自己喜欢的脚本名 - 添加并提交你当前工作区,因为该命令不会在工作区没干净之前生效,如果需要尝试构建,使用原先的`build:h5`就行 - 运行`npm run patch-build:h5` ### 小程序 uni-mp-weixin / taro-mp-weixin ... - 在`package.json`中的`scripts`添加对应命令,比如原来是`"build:mp-weixin": "..."`, 添加一个 `"patch-build:mp-weixin": "npm version patch && ..."`或者你自己喜欢的脚本名 - 添加并提交你当前工作区,因为该命令不会在工作区没干净之前生效,如果需要进行生产环境下开发,使用原先的`build:mp-weixin`就行 - 运行`npm run patch-build:mp-weixin` - 发布小程序 ### 服务端渲染 vue-ssr / vite-ssr / webpack-ssr ... 如果你的项目不依赖于构建,或者你希望每一次提交都更新版本号,可以尝试在目录`.git/hooks`添加文件`pre-commit` ```bash npm version patch --no-git-tag-version git add package.json # 你的package.json目录 ``` 此时你的项目会在每一次提交时自动更新版本号 如果你希望只在某一个根目录被更新时更新: ```bash if git diff HEAD --name-only | grep -q "^frontend/"; then cd frontend npm version patch --no-git-tag-version git add package.json # 你的package.json目录 fi ``` ## 本项目预览 ```bash npm run dev # 旧版本 # 停止应用 npm run patch-build # 构建并更新版本号 npm run dev # 新版本 ``` ## 访问package.json 虽然版本被更新了,但还是得访问到,修改以下文件以访问`package.json` ### vue/vite 在`vite.config.ts`中的`resolve`字段添加`'@@': fileURLToPath(new URL('.', import.meta.url))`或者别的你喜欢的别名,这样可用`@@`直接访问根目录 如果你的`vite.config.ts`没有该字段,或者没有该文件,那么: - 如果你的vue版本与本项目接近,可以直接参考本项目的`vite.config.ts` - 否则参考vite[文档](https://cn.vitejs.dev/config/) 现在你可以通过@@访问根目录了,例如: ```ts import packageJson from '@@/package.json' // 导入package.json const version = packageJson.version ``` 或者使用vite提供的[json功能](https://cn.vitejs.dev/guide/features.html#json) ```ts import { version } from '@@/package.json ``` 不过直接使用相对路径访问也是可行的,比如`../../package.json`这种形式 ### 纯webpack项目 ```js // 相对路径 const version = require('../../package.json').version ``` ### Typescript 如果是typescript项目, 需要另外在`ts.config.json`的include内添加`"package.json"`, 以及path中也要添加`"@@/*": ["./*"]`, 另请参考ts官方文档 ## 附录 - npm version 帮助 `npm help version` - [tsconfig官方文档](https://www.typescriptlang.org/tsconfig) - [vite文档](https://cn.vitejs.dev/guide/)