npm package: @lycz/version-check
Description: 本脚本用于辅助界面实现缓存控制
Author: lizhenqing
Latest version: 1.0.5

# versionCheck

## 功能

本脚本用于辅助界面实现缓存控制

## 开发说明

### 环境依赖

用 yarn 或 npm 安装都可（需要在终端先 cd 到 versionCheck 目录下，再操作）
另外，全局安装一下 rollup

### 发布

为便于各种形式使用，需要使用 rollup 进行打包，先全局安装 rollup
再执行以下步骤：

- 将 package.json 中，version 修改为合适版本
- 将改动添加到 CHANGELOG.md 文件中
- 终端 cd 到 versionCheck 目录下
- 执行命令 `npm publish` 将文件上传到 npm
- 将 script 文件夹下的 versionCheck.js 文件，添加第二步的版本号
- 将 js 文件上传到 静态资源服务器

因为名称格式为 @name1/name2 的形式下，npm 会默认发到私有包（私有是收费的），导致发不上去
所以，需要使用指令：npm publish --access public

## 使用说明

本脚本提供两种使用方式

- npm 形式

  - 首先安装依赖

    - `npm install @lycz/version-check`
    - `yarn add @lycz/version-check`

  - 在入口 js 中，添加以下代码

    ```javascript
    import versionCheck from '@lycz/version-check';

    versionCheck({
      serverName: 'your-project-name',
    });
    ```

- script 形式

  在入口的 index.html 中添加以下代码（必填的只有 serverName，其它的仅做参考）

  ```javascript
    <!-- 注意变更为对应的版本号 -->
    <script src="https://lzqing.top/cdn/versionCheck-1.0.0.js"></script>
    <script>
      window.initVersionCheck({
        serverName: "your-project-name", // 当前站点的名称
        timeInterval: 60 * 1000, // 轮询检测的时间间隔
        verifyOnLoad: false, // 是否在刚进入界面时就检测一次（如果此时检测到有资源更新，会自动刷新），默认false
        listenUrl: { // 如果不想监听当前界面的url，使用这个属性指定各环境下的监听url（一般只在微服务子站点场景下需要设置，默认不设置这个字段即可）
          dev: 'https://marketing-dev.saicmobility.com/atomic-auth-platform/',
          sit: 'https://marketing-sit.saicmobility.com/atomic-auth-platform/',
          prod: 'https://marketing.saicmobility.com/atomic-auth-platform/'
        },
        modalCfg: {
          /** 弹窗最外层div样式 */
          modalStyle: 'background: #fffcf8;border-radius: 3px;box-shadow: 0 0 10px #ffe8c3',
          /** 提示的文案 */
          alertText: '有更新了，快点点~~',
          /** 提示文案的样式 */
          alertTextStyle: 'color: #5d5d5d;',
          /** 按钮组（确认和取消两个按钮处于一个div中，称为按钮组）对应的样式 */
          btnGroupStyle: '',
          /** 确认按钮文案 */
          okBtnText: '【点】',
          /** 确认按钮样式 */
          okBtnStyle: 'color: #2add26;',
          /** 取消按钮文案 */
          cancelBtnText: '不点',
          /** 取消按钮样式 */
          cancelBtnStyle: 'color:#5d5d5d',
        },
      });
    </script>
  ```

### 初始化参数

| 参数名称     | 类型      | 是否必填       | 说明                                                                                                                       |
| ------------ | --------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
| serverName   | string    | 是             | 运行的站点名称，一般设置为 git 仓库名称                                                                                    |
| timeInterval | number    | 否，默认 60 秒 | 轮询检测的时间间隔，传入时，单位为毫秒                                                                                     |
| verifyOnLoad | boolean   | 否，默认 false | 是否在刚进入界面时就检测一次（这种情况下，检测到有资源更新会自动刷新界面）                                                 |
| listenUrl    | object    | 否             | 微前端的子站点形式接入时，才需要设置。<br/>设置时，传入各个环境下对应的入口 html 地址（对象形式，key 为 dev、sit 和 prod） |
| modalCfg     | IModalCfg | 否             | 用于设置弹窗的文案和样式                                                                                                   |

### 弹窗参数(IModalCfg)

| 参数名称       | 类型   | 是否必填 | 说明                                                                   |
| -------------- | ------ | -------- | ---------------------------------------------------------------------- |
| modalStyle     | string | 否       | 弹窗最外层 div 样式                                                    |
| alertText      | string | 否       | 提示的文案                                                             |
| alertTextStyle | string | 否       | 提示文案的样式                                                         |
| btnGroupStyle  | string | 否       | 按钮组对应的样式<br/>确认和取消两个按钮处于一个 div 中，这里称为按钮组 |
| okBtnText      | string | 否       | 确认按钮文案                                                           |
| okBtnStyle     | string | 否       | 确认按钮样式                                                           |
| cancelBtnText  | string | 否       | 取消按钮文案                                                           |
| cancelBtnStyle | string | 否       | 取消按钮样式                                                           |