version rocket
1.7.1
英語| 簡體中文
用於Web應用程序版本檢測和部署通知的工具庫。
目錄
版本高架包含兩個功能模塊： Web應用程序版本實時檢測，自動部署消息給Lark或Wecom Group Chat
您可以根據需要分別使用模塊，也可以一起使用
什麼時候適合使用Web應用程序版本實時檢測？ - 場景：這種情況經常發生。當用戶長時間在瀏覽器中打開Web應用程序並且沒有刷新頁面。當應用程序具有新版本更新或問題維修時，用戶將不知道該版本的新版本將導致用戶。繼續使用舊版本來影響用戶體驗和後端數據準確性。
什麼時候適用於自動向Lark或Wecom組聊天發送部署消息？ - 場景：團隊合作可能存在這樣的情況。作為前端工程師，每次部署後，您都需要與團隊成員進行口頭交流。沒有部署記錄要遵循。
Webhook方法。在應用程序部署成功之後，通過小組聊天機器人，“成功部署”的新聞將自動推向組聊天。如果您有其他平台的推動需求，則可以提及問題
v1.7.0上的任何文件Web應用程序版本實時檢測：
Web Worker API執行監控輪詢，這不會影響瀏覽器渲染過程。Web Worker API執行監控輪詢，這不會影響瀏覽器渲染過程。 v1.7.0自動將部署消息發送到Lark或Wecom組聊天： version-Rocket CALL CALL CALL the Webhook方法由協作Office軟件提供的Webhook方法觸發組聊天機器人發送消息。
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
步驟1：導入checkVersion() ，並使用它
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion ( {
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
// Refer to API for more configuration options
} )
// To terminate version detection, call the unCheckVersion method during the destruction life cycle. For details, see the API
unCheckVersion ( { closeDialog : false } )
步驟2：執行generate-version-file自定義命令後，生成version.json文件，用於部署到遠程服務器
VERSION （可選）：當需要自定義版本時，將傳遞。默認值為package.json版本字段
文件輸出目錄（可選）：用戶定義的版本。 JSON輸出目錄，默認情況下是DIST目錄
EXTERNAL （可選）：當您想將更多信息保存到version.json時，例如當前版本的修改內容或需要在彈出窗口上顯示的其他內容（inversionupdate custom UI中） v1.6.0
EXTERNAL_PATH （可選）：接受文件路徑，當需要將很多額外信息寫入version.json 。當設置EXTERNAL和EXTERNAL_PATH時，優先級低於EXTERNAL custom ui） v1.6.1
版本使用
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"generate:version" : "VERSION=1.1.0-beta generate-version-file dist public"
// Windows system: install cross-env first
// npm install cross-env -D
"generate:version" : "cross-env VERSION=1.1.0-beta generate-version-file dist public"
. . .
} ,
...
}外部v1.6.0和external_path v1.6.1用法
JSON格式請使用此工具逃脫單擊此處
// 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"
// Mac or Linux （JSON file, e.g. version-external.json）
"generate:version" : "EXTERNAL_PATH=version-external.json 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"
// Windows （JSON file, e.g. version-external.json）
"generate:version" : "set EXTERNAL_PATH=version-external.json && generate-version-file dist public"
. . .
} ,
...
} // version-external.json
{
"update" : [
"fix some bugs" ,
"improve home page" ,
"update docs"
] ,
"content" : "please update to latest version"
}// nginx example
server {
...
location / {
...
if ( $request_filename ~ * . * / version . (json)$) {
add_header Cache-Control " private, no-store, no-cache, must-revalidate, proxy-revalidate " ;
}
...
}
...
}完成上述兩個步驟，可以正常使用版本監視功能（通過版本編號管理）？
v1.7.0
配x 友好的提醒：此方法不支持顯示“當前版本更改或需要在提示窗口中顯示的其他信息”。如果您有這樣的要求，請使用“版本管理”方法。
導入checkVersion() ，並使用它
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// Call checkVersion in the lifecycle hook
checkVersion ( {
// The list of files to be monitored usually includes the index.html file under a certain domain
checkOriginSpecifiedFilesUrl : [ ` ${ location . origin } /index.html` ] ,
// The validation mode for the list of monitored files: 'one' (default) or 'all'
checkOriginSpecifiedFilesUrlMode : 'one' ,
// Whether to enable version monitoring (default true)
enable : process . env . NODE_ENV !== 'development'
} )
// If you need to terminate version checking, call the unCheckVersion method in the destroy lifecycle. For more details, see the API documentation
unCheckVersion ( { closeDialog : false } )
完成上述步驟後，可以正常使用版本監視功能（通過檢測指定文件內容中的更新）？
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion (
{
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
} ,
{
title : 'Title' ,
description : 'Description' ,
primaryColor : '#758bfd' ,
rocketColor : '#ff8600' ,
buttonText : 'Button Text' ,
}
)或設置提示圖片
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion (
{
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
} ,
{
imageUrl : 'https://avatars.githubusercontent.com/u/26329117' ,
}
) 
步驟1：
lark-message-config.json文件以設置消息卡的文本MESSAGE_PATH （可選）：如果您需要自定義文件路徑或文件名（如果需要區分部署環境，此參數很有用）。默認情況下，使用了根目錄中的lark-message-config.json文件PACKAGE_JSON_PATH （可選）：如果您需要自定義package.json文件的路徑（此參數可能對MonorePo項目的部署很有用），則通過。默認值是在root路徑中獲取package.json文件 // package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"send-lark-message:test" : "MESSAGE_PATH=./lark-message-staging-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
// Windows system: install cross-env first
// npm install cross-env -D
"send-lark-message:test" : "cross-env MESSAGE_PATH=./lark-message-staging-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
. . .
} ,
...
}步驟2：設置lark-message-config.json
// lark-message-config.json
{
// optional: card header's background color, default is turquoise, v1.6.2
// available values: blue | wathet | turquoise | green | yellow | orange | red | carmine | violet | purple | indigo | grey
"headerBgColor" : "red" ,
// card title
"title" : "TEST FE Deployed Successfully" ,
// project name label
"projectNameLabel" : "Project name label" ,
// deploy project name
"projectName" : "TEST" ,
// project branch label
"branchLabel" : "Branch label" ,
// deploy branch name
"branch" : "Staging" ,
// version label
"versionLabel" : "Version label" ,
// version
"version" : "1.1.1.0" ,
// project access url label
"accessUrlLabel" : "Access URL label" ,
// project access url
"accessUrl" : "https://test.com" ,
// remind group chat members label
"isNotifyAllLabel" : "Is notify all label" ,
// remind group chat members: true/false
"isNotifyAll" : true ,
// lark robot webhook url
"larkWebHook" : "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx" ,
// deploy type description
"deployToolsText" : "Deploy tools text" ,
// deploy type
"deployTools" : "Jenkins" ,
// the deploy time zone that you want to display, default "Asia/Shanghai"
"expectConvertToTimezone" : "America/New_York"
// more information want to show
"remark" : "Trigger by bob, fix xxx bug"
} 如果將根據條件生成您的卡副本，則可以通過MESSAGE_JSON字段進行自定義，例如版本，標題等
注意： MESSAGE_JSON需要逃脫
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// 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
"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"
. . .
} ,
...
}或在導出變量後，引用package.json（不支持Windows）
// ci file
sh "npm run build"
sh "export messageJSON='{"title": "This is a title"}'"
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
"send-lark-message:test" : "MESSAGE_JSON=${messageJSON} send-lark-message"
. . .
} ,
...
} // lark-message-config.json
{
// Message card content
"message" : {
"msg_type" : "text" ,
"content" : {
"text" : "New message reminder"
}
} ,
// Lark robot's webhook link
"larkWebHook" : "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
} 
步驟1：
message-config.json文件以設置消息卡的文本MESSAGE_PATH （可選）：當您需要自定義文件路徑或文件名時傳遞（如果需要區分部署環境，則此參數很有用）。默認值是在根目錄中使用Message-config.json文件PACKAGE_JSON_PATH （可選）：當需要自定義路徑到package.json文件時傳遞（此參數可能對MonorePo項目的部署很有用）。默認值是在root路徑中獲取package.json文件 // package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"send-wecom-message:test" : "MESSAGE_PATH=./message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-wecom-message"
// Windows system: install cross-env first
// npm install cross-env -D
"send-wecom-message:test" : "cross-env MESSAGE_PATH=./message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-wecom-message"
. . .
} ,
...
}步驟2：設置message-config.json
{
// card title
"title" : "TEST FE Deployed Successfully" ,
// project name label
"projectNameLabel" : "Project name label" ,
// deploy project name
"projectName" : "TEST" ,
// project branch label
"branchLabel" : "Branch label" ,
// deploy branch name
"branch" : "Staging" ,
// version label
"versionLabel" : "Version label" ,
// version
"version" : "1.1.1.0" ,
// project access url label
"accessUrlLabel" : "Access URL label" ,
// project access url
"accessUrl" : "https://test.com" ,
// remind group chat members label
"isNotifyAllLabel" : "Is notify all label" ,
// remind group chat members: true/false
"isNotifyAll" : true ,
// WeCom robot webhook url
"webHook" : "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxxxxxxxxxxxx" ,
// deploy type description
"deployToolsText" : "Deploy tools text" ,
// deploy type
"deployTools" : "Jenkins" ,
// the deploy time zone that you want to display, default "Asia/Shanghai"
"expectConvertToTimezone" : "America/New_York"
// more information want to show
"remark" : "Trigger by bob, fix xxx bug"
} 如果將根據條件生成您的卡副本，則可以通過MESSAGE_JSON字段進行自定義，例如版本，標題等
注意： MESSAGE_JSON需要逃脫
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// 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
"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"
. . .
} ,
...
}或在導出變量後，引用package.json（不支持Windows）
// ci file
sh "npm run build"
sh "export messageJSON='{"title": "This is a title"}'"
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
"send-wecom-message:test" : "MESSAGE_JSON=${messageJSON} send-wecom-message"
. . .
} ,
...
} // message-config.json
{
// message card template content
"message" : {
"msgtype" : "text" ,
"text" : {
"content" : "This is a custom message"
}
}
// webhook link for the WeCom bot
" webHook ": "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxxxxxxxxx"
} 
CheckVersion功能
啟用實時應用程序檢測
| 參數 | 類型 | 描述 | 預設 | 必需的 |
|---|---|---|---|---|
| config | 目的 | 版本監視配置項目 | 是的 | |
| config.originversionfileurl | 細繩 | 遠程服務器上的version.json文件的路徑 | 是的 | |
| config.localpackageversion | 細繩 | 當前應用程序的版本通常為package.json的版本字段。 | 是的 | |
| config.pollingtime | 數字 | 在MS中進行輪詢監視的時間間隔 | 5000 | 不 |
| config.immediate | 布爾 | 在第一次訪問時，將立即觸發版本監視，然後進行輪詢，以定制的時間間隔v1.5.0進行。 | 錯誤的 | 不 |
| config.checkoriginspecifiedfilesurl | 大批 | 設置此屬性將使用“檢測指定文件內容中的更新”，而不是“版本編號管理”來監視版本。傳遞要監視的文件地址列表，通常在某個域（自動重複數據刪除） v1.7.0下的index.html文件 | 錯誤的 | |
| config.checkoriginspecifiedfilesurlmode | “一個” /“全部” | “一個”表示，如果列表中的任何文件地址的內容更改，則會顯示更新的提示； “全部”意味著僅在列表中所有文件地址的內容更改時，才會顯示更新的提示。 （僅在配置CheckOriginsPecifiedFilesUrl時才生效） v1.7.0 | '一' | 錯誤的 |
| config.enable | 布爾 | 是否啟用版本監視。此配置項可用於僅在指定環境中啟用版本監視v1.7.0 | 真的 | 否 |
| config.clearintervalondialog | 布爾 | 當出現新版本的提示對話框時，清除計時器v1.7.0 | 錯誤的 | 否 |
| config.onversionupdate | 功能（數據） | 自定義版本提示UI的回調函數（如果要自定義彈出式UI，則可以通過回調函數獲取返回值以控制彈出窗口的外觀） | 不 | |
| config.onrefresh | 功能（數據） | 確認更新：自定義刷新事件的回調功能，其中數據是最新版本v1.5.0 | 不 | |
| config.oncancel | 功能（數據） | 取消更新：自定義取消事件的回調功能，其中數據是最新版本v1.5.0 | 不 | |
| 選項 | 目的 | 彈出文本和主題的配置項目（不是自定義彈出式UI，但如果需要修改文本和主題，請使用它） | 不 | |
| options.title | 細繩 | 彈出標題 | 更新 | 不 |
| 選項。描述 | 細繩 | 彈出描述 | V XXX可用 | 不 |
| options.buttontext | 細繩 | 彈出按鈕文字 | 重新整理 | 不 |
| options.cancelbuttontext | 細繩 | 文本以關閉彈出按鈕（如果希望允許彈出彈出窗口關閉，請添加此選項） v1.5.0 | 不 | |
| options.cancelmode | 忽略電流version /忽略 - today /忽略電流窗口 | 關閉彈出模式（設置CancelButTontext時會生效） v1.5.0 | 忽略電流變 | 不 |
| options.cancelupdateandstopworker | 布爾 | 取消彈出窗口時，工人也會停止（設置CancelButTontext時會生效） v1.5.0 | 錯誤的 | 否 |
| options.imageurl | 細繩 | 彈出圖像 | 不 | |
| options.RocketColor | 細繩 | 彈出式圖片的主題顏色，在設置選項之後。 ImageUrl無效 | 不 | |
| options.primarycolor | 細繩 | 彈出窗口的主題顏色將影響提示圖像背景顏色和按鈕背景顏色，在設置ImageUrl無效之後 | 不 | |
| options.buttonStyle | 細繩 | 彈出按鈕的CSS配置可以覆蓋默認按鈕樣式 | 不 |
未選中功能
終止調用
checkVersionworker過程
| 參數 | 類型 | 描述 | 預設 | 必需的 |
|---|---|---|---|---|
| 封閉式 | 布爾 | 是否關閉版本更新提示彈出窗口 | - | 是的 |
| 近距離工作者 | 布爾 | 是否關閉工人 | 真的 | 不 |
npm run test 版本高速公路是帶有Apache許可證2.0的開源軟件
Web-authn-Completed-App
在線預覽
一個基於WebAuthn API的完整應用程序，該應用程序允許網站使用瀏覽器/系統中的內置身份驗證器（例如Apple TouchID和Windows Hello或移動設備的生物識別傳感器）對用戶進行身份驗證。它將替換密碼，這是在線身份驗證的未來。
