version rocket
1.7.1
Английский | 简体中文
Библиотека инструментов для обнаружения версий и развертывания веб -приложений.
Каталог
Версия-ракеты содержит два функциональных модуля: версия веб-приложения, обнаружение в реальном времени , автоматическое сообщение развертывания в чат Lark или Wecom
Вы можете использовать модуль отдельно в соответствии с потребностями или использовать его вместе
Когда подходит для использования версии веб-приложения в режиме реального времени ? -Сцена: такая ситуация часто случается. Когда пользователь открывает веб -приложение в браузере в течение длительного времени и не обновляет страницу. Когда приложение имеет новую обновление версии или восстановление проблемы, пользователь не будет знать, что есть новая версия релиза, которая приведет к пользователю. Продолжайте использовать старые версии, чтобы повлиять на пользовательский опыт и точность данных.
Когда он подходит для автоматической отправки сообщений о развертывании в чат Lark или Wecom ? -Сцена: может быть такая ситуация в командном сотрудничестве. Как фронт-инженер, вам нужно устно общаться с членами команды после каждого развертывания. Нет никаких записей о развертывании, чтобы следовать.
Webhook . После того, как развертывание приложения будет успешным, благодаря роботам группового чата, новости о «успешном развертывании» будут автоматически направлены в групповой чат.Если у вас есть потребности в других платформах, вы можете упомянуть проблемы
v1.7.0Версия веб-приложения в режиме реального времени:
Web Worker API на основе JavaScript для проведения мониторинга опроса, что не влияет на процесс рендеринга браузера.Web Worker API на основе JavaScript для проведения мониторинга опроса, что не влияет на процесс рендеринга браузера. v1.7.0Автоматическая отправка сообщений о развертывании в чат Lark или WECOM Group: Версия-риск. Вызовите метод WebHook, предоставленный программным обеспечением Collaborative Office, чтобы запустить роботы группового чата Отправлять сообщения.
# 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 (необязательно): когда требуется пользовательская версия , она передается.
Справочник по выводу файла (необязательно): Пользовательский Dieplerified Version.json Output Directory , который по умолчанию является дистанционным каталогом.
EXTERNAL (необязательно): когда v1.6.0 хотите сохранить дополнительную информацию для version.json .
EXTERNAL_PATH (необязательно) ： Принимает путь к файлу, рекомендованный, когда необходимо записать много дополнительной информации на version.json . Когда установлены как EXTERNAL , так и EXTERNAL_PATH , приоритет ниже EXTERNAL (используется в пользовательском пользовательском интерфейсе onversionupdate) 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
️ Дружественное напоминание: этот метод не поддерживает отображение «изменений текущей версии или другой информации, которую необходимо показать в окне приглашения». Если у вас есть такое требование, используйте метод «Управление версией».
Импорт 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 в каталоге Project Root, чтобы установить текст карты сообщенияMESSAGE_PATH (необязательно): Проходит, если вам нужно настроить путь к файлу или имя файла (этот параметр полезен, если вам нужно дифференцировать среду развертывания). По умолчанию используется файл Lark-Message-config.json в корневом каталогеPACKAGE_JSON_PATH (необязательно): пройден, если вам нужно настроить путь к файлу package.json (этот параметр может быть полезен для развертывания проектов Monorepo). По умолчанию есть файл 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 в каталоге Project Root, чтобы установить текст карты сообщенияMESSAGE_PATH (необязательно): Проходит, когда вам нужно настроить путь к файлу или имя файла (этот параметр полезен, если вам нужно дифференцировать среду развертывания). По умолчанию используется файл сообщения config.json в корневом каталогеPACKAGE_JSON_PATH (необязательно): пройден, когда требуется пользовательский путь к файлу package.json (этот параметр может быть полезен для развертывания проектов Monorepo). По умолчанию есть файл 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"
} 
Функция схемы
Включить обнаружение версий приложения в реальном времени
| Параметры | Тип | Описание | По умолчанию | Необходимый |
|---|---|---|---|---|
| конфигурация | объект | Элемент конфигурации мониторинга версии | Да | |
| config.originversionfileurl | нить | Путь к файлу version.json на удаленном сервере | Да | |
| config.localpackageversion | нить | Версия текущего приложения обычно принимает поле версии package.json для сравнения с файлом version.json удаленного сервера | Да | |
| config.pollingtime | число | Время временного интервала для мониторинга опросов, в РС | 5000 | Нет |
| config.immediate | логический | При первом посещении мониторинг версий будет сразу же запускается, а затем проводятся опросы в индивидуальном интервале времени v1.5.0 | ЛОЖЬ | Нет |
| config.checkoriginspecifiedfilesurl | множество | Установка этого свойства будет использовать «Обнаружение обновлений в указанном содержании файлов» вместо «Управление номером версий» для мониторинга версий. Передайте в списке адресов файлов, которые будут контролироваться, обычно файл index.html в определенном доменном (автоматическом дедуплировании) v1.7.0 | ЛОЖЬ | |
| config.checkoriginspecifiedfilesurlmode | 'One' / 'All' | «Один» означает, что если содержимое любого файлового адреса в изменениях списка будет отображаться; «Все» означает, что подсказка для обновления будет отображаться только при изменении содержимого всех файлов в списке. (Это вступает в силу только в случае настроения CheckorigInsfiedFilesurl) v1.7.0 | 'один' | ЛОЖЬ |
| config.enable | логический | Чтобы включить мониторинг версий. Этот элемент конфигурации можно использовать для включения мониторинга версий только в указанных средах v1.7.0 | истинный | 否 |
| config.clearintervalondialog | логический | Когда появится диалог приглашения для новой версии, очистите таймер v1.7.0 | ЛОЖЬ | 否 |
| config.OnversionUpdate | функция (данные) | Функция обратного вызова для пользовательского пользовательского интерфейса версий (если вы хотите настроить интерфейс всплывающего окна, вы можете получить возвратное значение через функцию обратного вызова, чтобы управлять внешним видом всплывающего окна) | Нет | |
| config.onrefresh | функция (данные) | Подтвердите обновление: функция обратного вызова индивидуального события обновления, где данные являются последней версией v1.5.0 | Нет | |
| config.oncancel | функция (данные) | v1.5.0 | Нет | |
| параметры | объект | Элементы конфигурации для всплывающего текста и тем (не настраивайте всплывающий интерфейс, но используйте его, если вам нужно изменить текст и темы) | Нет | |
| Options.title | нить | Название всплывающего окна | Обновлять | Нет |
| Options.description | нить | Всплывающее описание | V XXX доступен | Нет |
| Options.buttontext | нить | Всплывающая кнопка текст | Обновлять | Нет |
| Options.cancelbuttontext | нить | Текст для закрытия кнопки всплывающего окна (добавьте эту опцию, если вы хотите, чтобы всплывающее окно было разрешено близко) v1.5.0 | Нет | |
| Options.cancelmode | Игнорировать ток-версию / игнорировать-тодай / игнорировать ток | Закрыть режим всплывающего окна (он вступает в силу, когда установлен Cancelbuttontext) v1.5.0 | Игнорировать ток-версию | Нет |
| Options.cancelupdateAndstopworker | логический | Когда всплывающее окно отменяется, работник также останавливается (он вступает в силу, когда установлен Cancelbuttontext) v1.5.0 | ЛОЖЬ | 否 |
| Options.ImageUrl | нить | Всплывающее изображение | Нет | |
| Options.RocketColor | нить | Цвет темы ракеты Popup Picture, после настройки. | Нет | |
| Опции.primarycolor | нить | Цвет темы всплывающего окна, он повлияет на цвет фона изображения и цвет фона кнопок, после настройки ImageUrl недействителен | Нет | |
| Options.buttonStyle | нить | Конфигурация CSS всплывающих кнопок может переопределить стиль кнопки по умолчанию | Нет |
Функция Uncheckversion
Завершить
workerпроцесс, созданный послеcheckVersion
| Параметры | Тип | Описание | По умолчанию | Необходимый |
|---|---|---|---|---|
| закрытый | логический | Закрыть ли приглашение обновления версии | - | Да |
| близкий работник | логический | Закрыть ли работника | истинный | Нет |
npm run test Версия-Ракет-это программное обеспечение с открытым исходным кодом с Apache License 2.0
Web-Authn-Completled-App
Онлайн предварительный просмотр
Полное приложение, основанное на API WebAuthn, которое позволяет веб-сайтам аутентифицировать пользователей со встроенным аутентификатором в браузере/системе (например, Apple TouchID и Windows Hello или биометрический датчик мобильных устройств). Он заменит пароли , что является будущим онлайн -аутентификации.
