前端每次打包时候生成hash码保存到静态文件中并传入请求头

为了监控当前前端运行的是哪个版本，并让后台服务知道是哪个版本。方便代码的管控，版本的管控以及bug功能等的调试和切割。

1. 生成hash码

1. 使用uuid来生成唯一的码

# install uuid
yarn add uuid

2. 再加上日期的salt。

   # install moment OR dayjs
   yarn add moment
   

3. 还要添加当前运行环境的参数

   保证要已经做好了环境变量的配置，如何配置环境变量这里不做赘述。

   # 环境变量内容 一下是生产环境的环境变量配置内容。
   'use strict'
   module.exports = {
     NODE_ENV: '"production"',
     API_SERVER: '"prod"'
   }
   

4. 注意，要保证生产的格式符合 ajax header 的格式。

   // 脚本文件代码 version-log/index.js
   const moment = require('moment')
   const uuid = require('uuid')
   // 获取环境变量
   const envVar = process.env.API_SERVER // 此变量需要再package.json的脚步中进行配置，参考下面的package.json的配置信息。
   const hashCode = `${envVar}-${uuid.v1()}-${moment().format('YYYYMMDDhhmmss')}` // 最好不要有空格等不支持放进请求头的信息。
   // 比如; prod-39acf170-3910-11ef-aeb4-eda1b3d4972a-20240703034532
   

2. 把hash码写进静态文件中(保证码不会在打包时被编译)

1. 前端需要写数据到文件中，需要使用 nodejs 服务环境。

2. 使用nodejs的fs功能。

3. 定义打包前生成hash码指令

   # package.json 文件
   "scripts": {
       "start": "npm run dev",
       "v-log-test": "cross-env API_SERVER=test node static/plugin/version-log/index.js", # 单独生成hash码的指令
            "v-log-prod": "cross-env API_SERVER=prod node static/plugin/version-log/index.js", # 单独生成hash码的指令
       "build": "npm run build--test",
       "build--test": "npm run v-log-test && cross-env NODE_ENV=testing API_SERVER=test node build/build.js",
       "build-test-hash": "npm run v-log-test && npm run build--test" # 在生成hash码再进行打包的指令
            "build--prod": "npm run v-log-prod && cross-env NODE_ENV=production API_SERVER=prod node build/build.js",
     }
   

   # 调用指令
   npm run v-log-test
   # OR
   yarn v-log-prod
   # OR
   yarn build--prod # 打包生产环境
   

3. 具体实现如下：

   // 脚本文件代码 version-log/index.js
   // fs 和 path 都是 nodejs 内置的api, 不需要再次安装。
   const fs = require('fs')
   const path = require('path')
   
   const moment = require('moment')
   const uuid = require('uuid')
   // 获取环境变量
   const envVar = process.env.API_SERVER // 此变量需要再package.json的脚步中进行配置，参考下面的package.json的配置信息。
   // 定义要写入的文件内容和文件路径
   const hashCode = `${envVar}-${uuid.v1()}-${moment().format('YYYYMMDDhhmmss')}` // 要写入文件和传进请求头的数据
   const filePath = path.resolve(__dirname, 'v-log.txt') // v-log.txt 是要放入数据的文件名
   
   // 写入文件
   fs.writeFile(filePath, hashCode, (err) => {
     if (err) {
       console.error('写入文件时出错:', err)
     } else {
       console.log('文件已成功写入:', filePath)
     }
   })
   
   // 此时已经正茬把hashCode写入v-log.txt文件了。
   
   

   # v-log.txt文件。 后端服务要解析该文件进行获取hashCode。
   prod-39acf170-3910-11ef-aeb4-eda1b3d4972a-20240703034532
   

   文件的目录情况，以Vue项目为例：

   /static/plugin/version-log/index.js

   /static/plugin/version-log/v-log.txt

3. 把生成的hashCode放入请求头中

1. 由于 /static/plugin/version-log/index.js 是node环境，所以不能使用 export default 或者 export 来抛出数据，需要用 module.exports来导出数据，但是引入数据的地方【封装请求拦截】又是js环境。所以 module.exoprts 也不适用。

2. 引入数据的地方【封装请求拦截】又是js环境。所以 使用 node中的 fs.readFile 等方法也不适用。

3. js读取本地文件又挺麻烦，最好使用 axios.get方法来读取 v-log.txt文件。

4. 然后把 v-log.txt 的数据放入请求头中。

5. 具体实现代码如下:

   import axios from 'axios' // 引入axios
   
   let hashCode = '' // 要放入请求头中的数据
   const fetchHashCode = async () => {
     const ajax = axios.create() // 用axios创建一个新的axios实例，命名为ajax。 保证与普通其他的请求分开
     const res = await ajax.get('..xxx/xx/static/plugin/version-log/v-log.txt', {
       responseType: 'text' // 保证请求数据的类型
     })
     if (res.data) {
       hashCode = res.data || 'un-konwn'
     }
   }
   
   // 下面的代码是在axios.interceptors.request.use请求拦截中
   axios.interceptors.request.use(req => {
     // xxxx 其他操作
     req.headers['Version-Hash'] = haseCode || 'un-known'
   })
   // 上面的代码是在axios.interceptors.request.use请求拦截中
   
   // 至此即可在浏览器 network的请求头中看到 对应的信息
   // 'Version-Hash' prod-39acf170-3910-11ef-aeb4-eda1b3d4972a-20240703034532