Merge pull request #23 from guMcrey/feature/add-external

Feature/add external
guMcrey · Feb 4, 2023 · 3683488 · 3683488
2 parents 64a25e6 + 30d7143
commit 3683488
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 48 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -6,6 +6,14 @@
 
 ---
 
+## 1.6.0
+
+`2023-02-04`
+
+[#22](https://github.com/guMcrey/version-rocket/issues/22)
+- 🆕 generate-version-file add EXTERNAL env，can be used to display richer content when customizing the popup UI. Such as current version updates or other information
+- 💄 update README.md and README.zh-CN.md
+
 ## 1.5.0
 
 `2023-01-17`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,6 +6,14 @@
 
 ---
 
+## 1.6.0
+
+`2023-02-04`
+
+[#22](https://github.com/guMcrey/version-rocket/issues/22)
+- 🆕 generate-version-file 新增 EXTERNAL 坏境变量，可用于在自定义弹窗 UI 时展示更丰富内容。如当前版本更新内容或其他信息
+- 💄 更新 README.md 和 README.zh-CN.md 文档
+
 ## 1.5.0
 
 `2023-01-17`

diff --git a/README.md b/README.md
@@ -115,6 +115,8 @@ Step 2: after executing the `generate-version-file` custom command, generate the
 
 - File output directory (optional): **user defined version.json output directory**, which is the dist directory by default
 
+- `EXTERNAL` (optional): when you want to save more information to `version.json`, such as the modified content of the current version or other things that need to be displayed on the pop-up (used in onVersionUpdate custom UI) `v1.6.0`
+
 ```javascript
 // package.json
 
@@ -137,6 +139,35 @@ Step 2: after executing the `generate-version-file` custom command, generate the
 
 ```
 
+**EXTERNAL usage** `v1.6.0`
+
+JSON format please use this tool to escape [click here](https://codebeautify.org/json-encode-online)
+
+```javascript
+// package.json
+
+{
+  "name": "test",
+  "description": "test",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    ...
+    // Mac or Linux (simple text)
+    "generate:version": "EXTERNAL='some text' generate-version-file dist public"
+    // Mac or Linux (JSON text)
+    "generate:version": "EXTERNAL='{\"update\":\"fix bugs\",\"content\":\"some tips\"}' generate-version-file dist public"
+    // Windows (simple text)
+    "generate:version": "set EXTERNAL=some text && generate-version-file dist public"
+    // Windows (JSON text)
+    "generate:version": "set EXTERNAL={\"update\":\"fix bugs\",\"content\":\"some tips\"} && generate-version-file dist public"
+    ...
+  },
+  ...
+}
+
+```
+
 <details>
 <summary>⚠️ Notice:</summary>
 If your project is connected to CDN, it is strongly recommended that you set the `version.json` file is set to always no caching (configure in nginx or turn off the function of CDN ignoring the parameter cache)
@@ -311,17 +342,16 @@ If your card copy will be generated according to conditions, you can pass in `ME
     ...
     // Mac or Linux system
     "send-lark-message:test": "MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-lark-message"
-    // Windows system: install cross-env first
-    // npm install cross-env -D
-    "send-lark-message:test": "cross-env MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-lark-message"
+    // Windows system
+    "send-lark-message:test": "set MESSAGE_JSON={\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true} && send-lark-message"
     ...
   },
   ...
 }
 
 ```
 
-Or after export variables, quote in package.json
+Or after export variables, quote in package.json (not support Windows)
 
 ```javascript
 
@@ -340,11 +370,7 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
   "version": "0.0.1",
   "scripts": {
     ...
-    // Mac or Linux system
     "send-lark-message:test": "MESSAGE_JSON=${messageJSON} send-lark-message"
-    // Windows system: install cross-env first
-    // npm install cross-env -D
-    "send-lark-message:test": "cross-env MESSAGE_JSON=${messageJSON} send-lark-message"
     ...
   },
   ...
@@ -467,16 +493,15 @@ If your card copy will be generated according to conditions, you can pass in `ME
     ...
     // Mac or Linux system
     "send-wecom-message:test": "MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-wecom-message"
-    // Windows system: install cross-env first
-    // npm install cross-env -D
-    "send-wecom-message:test": "cross-env MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-wecom-message"
+    // Windows system
+    "send-wecom-message:test": "set MESSAGE_JSON={\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true} && send-wecom-message"
     ...
   },
   ...
 }
 ```
 
-Or after export variables, quote in package.json
+Or after export variables, quote in package.json (not support Windows)
 
 ```javascript
 
@@ -493,11 +518,7 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
   "version": "0.0.1",
   "scripts": {
     ...
-    // Mac or Linux system
     "send-wecom-message:test": "MESSAGE_JSON=${messageJSON} send-wecom-message"
-    // Windows system: install cross-env first
-    // npm install cross-env -D
-    "send-wecom-message:test": "cross-env MESSAGE_JSON=${messageJSON} send-wecom-message"
     ...
   },
   ...
@@ -541,17 +562,17 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
 | config.originVersionFileUrl | string |  The path to the version.json file on the remote server | | Yes |
 | config.localPackageVersion | string | The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server |  | Yes |
 | config.pollingTime | number | Time interval for polling monitoring, in ms | 5000 | No |
-| config.immediate | boolean | On the first visit, version monitoring will be triggered immediately, and then polling will be conducted at a customized time interval **`V 1.5.0`** | false | No |
+| config.immediate | boolean | On the first visit, version monitoring will be triggered immediately, and then polling will be conducted at a customized time interval **`v1.5.0`** | false | No |
 | config.onVersionUpdate | function(data) | Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) |  | No |
-| config.onRefresh | function(data) | Confirm update: the callback function of the custom refresh event, where data is the latest version **`V 1.5.0`** |  | No |
-| config.onCancel | function(data) | Cancel update: the callback function of the custom cancel event, where data is the latest version **`V 1.5.0`** |  | No |
+| config.onRefresh | function(data) | Confirm update: the callback function of the custom refresh event, where data is the latest version **`v1.5.0`** |  | No |
+| config.onCancel | function(data) | Cancel update: the callback function of the custom cancel event, where data is the latest version **`v1.5.0`** |  | No |
 | options | object | Configuration items for popup text and themes (not customize the popup UI, but use it if you need to modify the text and themes) | | No |
 | options.title | string | Popup title | Update | No |
 | options.description | string | Popup description | V xxx is available | No |
 | options.buttonText | string | Popup button text | Refresh | No |
-| options.cancelButtonText | string | Text to close pop-up button (add this option, if you want the pop-up to be allowed to be close) **`V 1.5.0`** |  | No |
-| options.cancelMode | ignore-current-version / ignore-today / ignore-current-window | Close pop-up mode (It takes effect when cancelButtonText is set) **`V 1.5.0`** | ignore-current-version | No |
-| options.cancelUpdateAndStopWorker | boolean | When the popup is cancelled, the worker is also stopped (It takes effect when cancelButtonText is set) **`V 1.5.0`** | false | 否 |
+| options.cancelButtonText | string | Text to close pop-up button (add this option, if you want the pop-up to be allowed to be close) **`v1.5.0`** |  | No |
+| options.cancelMode | ignore-current-version / ignore-today / ignore-current-window | Close pop-up mode (It takes effect when cancelButtonText is set) **`v1.5.0`** | ignore-current-version | No |
+| options.cancelUpdateAndStopWorker | boolean | When the popup is cancelled, the worker is also stopped (It takes effect when cancelButtonText is set) **`v1.5.0`** | false | 否 |
 | options.imageUrl | string | Popup image |  | No |
 | options.rocketColor | string | The popup picture's theme color of the rocket, after setting Options.imageUrl is invalid | | No |
 | options.primaryColor | string | The theme color of the popup, it will affect the hint image background color and button background color, after setting imageUrl is invalid | | No |

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -112,6 +112,7 @@ unCheckVersion({closeDialog: false})
 第二步: 执行 `generate-version-file` 自定义命令后，在 dist 目录生成 `version.json` 文件, 用于部署到远程服务器
 - `VERSION` (参数可选): 需要**自定义 version** 时传入, 默认取 package.json 的 version 字段
 - 文件输出目录 (参数可选): 需要**自定义 version.json 输出目录**时传入, 默认为 dist 目录
+- `EXTERNAL` (参数可选)：希望将更多信息存到 `version.json` 中时传入，如当前版本的修改内容或其他需要展示在提示弹窗上时 （用于 onVersionUpdate 自定义 UI 时）`v1.6.0`
 
 ```javascript
 // package.json
@@ -135,6 +136,35 @@ unCheckVersion({closeDialog: false})
 
 ```
 
+**EXTERNAL 环境变量设置方式** `v1.6.0`
+
+JSON 格式可以通过 [这里](https://codebeautify.org/json-encode-online) 转义后再使用
+
+```javascript
+// package.json
+
+{
+  "name": "test",
+  "description": "test",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    ...
+    // Mac 或 Linux 系统 （简单文本）
+    "generate:version": "EXTERNAL='some text' generate-version-file dist public"
+    // Mac 或 Linux 系统 （JSON 文本）
+    "generate:version": "EXTERNAL='{\"update\":\"fix bugs\",\"content\":\"some tips\"}' generate-version-file dist public"
+    // Windows 系统 (简单文本)
+    "generate:version": "set EXTERNAL=some text && generate-version-file dist public"
+    // Windows 系统 (JSON 文本)
+    "generate:version": "set EXTERNAL={\"update\":\"fix bugs\",\"content\":\"some tips\"} && generate-version-file dist public"
+    ...
+  },
+  ...
+}
+
+```
+
 <details>
 <summary>⚠️ 注意事项</summary>
 如果你的项目接入了 CDN, 强烈建议你将 version.json 文件设置为强制不缓存 (在 nginx 中配置或关闭 CDN 忽略参数缓存的功能)
@@ -310,17 +340,16 @@ checkVersion(
     ...
     // Mac 或 Linux 系统
     "send-lark-message:test": "MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-lark-message"
-    // Windows 系统先安装 cross-env
-    // npm install cross-env -D
-    "send-lark-message:test": "cross-env MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-lark-message"
+    // Windows 系统
+    "send-lark-message:test": "set MESSAGE_JSON={\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true} && send-lark-message"
     ...
   },
   ...
 }
 
 ```
 
-或 export 变量后, 在 package.json 中引用
+或 export 变量后, 在 package.json 中引用 (不支持 Windows)
 
 ```javascript
 
@@ -339,11 +368,7 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
   "version": "0.0.1",
   "scripts": {
     ...
-    // Mac 或 Linux 系统
     "send-lark-message:test": "MESSAGE_JSON=${messageJSON} send-lark-message"
-    // Windows 系统先安装 cross-env
-    // npm install cross-env -D
-    "send-lark-message:test": "cross-env MESSAGE_JSON=${messageJSON} send-lark-message"
     ...
   },
   ...
@@ -462,16 +487,15 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
     ...
     // Mac 或 Linux 系统
     "send-wecom-message:test": "MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-wecom-message"
-    // Windows 系统先安装 cross-env
-    // npm install cross-env -D
-    "send-wecom-message:test": "cross-env MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-wecom-message"
+    // Windows 系统
+    "send-wecom-message:test": "set MESSAGE_JSON={\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true} && send-wecom-message"
     ...
   },
   ...
 }
 ```
 
-或 export 变量后, 在 `package.json` 中引用
+或 export 变量后, 在 `package.json` 中引用 (不支持 Windows)
 
 ```javascript
 
@@ -488,11 +512,7 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
   "version": "0.0.1",
   "scripts": {
     ...
-    // Mac 或 Linux 系统
     "send-wecom-message:test": "MESSAGE_JSON=${messageJSON} send-wecom-message"
-    // Windows 系统先安装 cross-env
-    // npm install cross-env -D
-    "send-wecom-message:test": "cross-env MESSAGE_JSON=${messageJSON} send-wecom-message"
     ...
   },
   ...
@@ -534,17 +554,17 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
 | config.originVersionFileUrl | string |  远程服务器上的 version.json 文件路径 |  | 是 |
 | config.localPackageVersion | string | 当前应用版本号, 通常取 package.json 的 version 字段, 用于与远程服务器的 version.json 文件比较 |  | 是 |
 | config.pollingTime | number | 轮询监测的时间间隔, 单位 ms | 5000 | 否 |
-| config.immediate | boolean | 第一次访问时, 立即触发版本监测, 之后按自定义时间间隔轮询 **`V 1.5.0`** | false | 否 |
+| config.immediate | boolean | 第一次访问时, 立即触发版本监测, 之后按自定义时间间隔轮询 **`v1.5.0`** | false | 否 |
 | config.onVersionUpdate | function(data) | 自定义版本提示 UI 的回调函数 (如果你想自定义弹窗 UI, 通过回调函数可以拿到返回值来控制弹窗的显隐 ) |  | 否 |
-| config.onRefresh | function(data) | 确认更新: 自定义 refresh 事件的回调函数, data 为最新版本号 **`V 1.5.0`** |  | 否 |
-| config.onCancel | function(data) | 取消更新: 自定义 cancel 事件的回调函数, data 为最新版本号 **`V 1.5.0`** |  | 否 |
+| config.onRefresh | function(data) | 确认更新: 自定义 refresh 事件的回调函数, data 为最新版本号 **`v1.5.0`** |  | 否 |
+| config.onCancel | function(data) | 取消更新: 自定义 cancel 事件的回调函数, data 为最新版本号 **`v1.5.0`** |  | 否 |
 | options | object | 弹窗文案和主题的配置项 (不自定义弹窗 UI, 但有修改文案和主题的需求时使用) |  | 否 |
 | options.title | string | 弹窗的标题 | Update | 否 |
 | options.description | string | 弹窗的描述 | V xxx is available | 否 |
 | options.buttonText | string | 弹窗按钮的文案 | Refresh | 否 |
-| options.cancelButtonText | string | 关闭弹窗按钮的文案 (如果你希望弹窗允许被关闭, 请添加此选项) **`V 1.5.0`** |  | 否 |
-| options.cancelMode | ignore-current-version (当前版本不再提示) / ignore-today (今天不再提示) / ignore-current-window (当前窗口不再提示) | 关闭弹窗的模式 (当 cancelButtonText 设置后生效) **`V 1.5.0`** | ignore-current-version | 否 |
-| options.cancelUpdateAndStopWorker | boolean | 关闭弹窗时, 也关闭 worker (当 cancelButtonText 设置后生效) **`V 1.5.0`** | false | 否 |
+| options.cancelButtonText | string | 关闭弹窗按钮的文案 (如果你希望弹窗允许被关闭, 请添加此选项) **`v1.5.0`** |  | 否 |
+| options.cancelMode | ignore-current-version (当前版本不再提示) / ignore-today (今天不再提示) / ignore-current-window (当前窗口不再提示) | 关闭弹窗的模式 (当 cancelButtonText 设置后生效) **`v1.5.0`** | ignore-current-version | 否 |
+| options.cancelUpdateAndStopWorker | boolean | 关闭弹窗时, 也关闭 worker (当 cancelButtonText 设置后生效) **`v1.5.0`** | false | 否 |
 | options.imageUrl | string | 弹窗的提示图片 |  | 否 |
 | options.rocketColor | string | 弹窗提示图片中火箭的主题色, 设置后 options.imageUrl 无效 |  | 否 |
 | options.primaryColor | string | 弹窗的主题色, 会作用到提示图片背景色和按钮背景色, 设置后 imageUrl 无效 | | 否 |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "version-rocket",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Tools to check version monitoring (updates) for web application. web 应用版本监测(更新)工具",
   "main": "index.js",
   "scripts": {

diff --git a/scripts/createVersionFile.js b/scripts/createVersionFile.js
@@ -8,11 +8,23 @@
 const fs = require('fs');
 const path = require('path');
 const outputDir = process.argv.length > 2 ? process.argv.splice(2) : ['dist']
+
+const getExternal = () => {
+  const external = process.env.EXTERNAL || ''
+  try {
+    JSON.parse(external)
+    return external
+  } catch (error) {
+    return `"${external.trim()}"`
+  }
+}
+
 outputDir.forEach((val) => {
   const outputVersionPath = path.join(process.cwd(), `${val}/version.json`);
   const packageJsonPath = path.join(process.cwd(), 'package.json');
   const packageJsonObject = JSON.parse(fs.readFileSync(packageJsonPath).toString());
-  fs.writeFile(outputVersionPath, `{ "version": "${process.env.VERSION || packageJsonObject.version}" }`, () => {
+
+  fs.writeFile(outputVersionPath, `{ "version": "${process.env.VERSION || packageJsonObject.version}", "external": ${getExternal()} }`, () => {
     console.log(`created ${val}/version file`, process.env.VERSION || packageJsonObject.version);
   })
 })
diff --git a/utils/index.js b/utils/index.js
@@ -25,6 +25,7 @@ export const createWorkerFunc = () => {
                 if (oldVersion !== versionJsonFile.version) {
                     temp.postMessage({
                         refreshPageVersion: `${versionJsonFile.version}`,
+                        external: versionJsonFile.external,
                     });
                 }
             });

diff --git a/utils/index.ts b/utils/index.ts
@@ -27,6 +27,7 @@ export const createWorkerFunc = () => {
           if (oldVersion !== versionJsonFile.version) {
             temp.postMessage({
               refreshPageVersion: `${versionJsonFile.version}`,
+              external: versionJsonFile.external,
             })
           }
         })