version rocket
1.7.1
Inglés | 简体中文
Una biblioteca de herramientas para la notificación de detección y implementación de la versión web.
Catalogar
Version-Rocket contiene dos módulos funcionales: Versión de aplicación web Versión de detección en tiempo real , mensaje de implementación automática en Lark o Wecom Group Chat
Puede usar un módulo por separado de acuerdo con las necesidades o usarlo juntos
¿Cuándo es adecuado para usar la versión de la aplicación web en tiempo real ? -La escena: este tipo de situación a menudo sucede. Cuando el usuario abre una aplicación web en el navegador durante mucho tiempo y no ha actualizado la página. Cuando la aplicación tiene una nueva actualización de la versión o la reparación del problema, el usuario no sabrá que hay una nueva versión de la versión, que conducirá al usuario. Continúe utilizando versiones antiguas para afectar la experiencia del usuario y la precisión de los datos de fondo.
¿Cuándo es adecuado para usar automáticamente mensajes de implementación a Lark o Wecom Group Chat ? -La escena: puede haber tal situación en la cooperación del equipo. Como ingeniero front-end, debe comunicarse verbalmente con los miembros del equipo después de cada implementación. No hay registros de implementación a seguir.
Webhook . Después de que la implementación de la aplicación sea exitosa, a través de los robots de chat grupal, las noticias de "implementación exitosa" se enviarán automáticamente al chat grupal.Si tiene las necesidades de empuje de otras plataformas, puede mencionar problemas
v1.7.0Versión de la aplicación web Detección en tiempo real:
Web Worker API basados en JavaScript para realizar la encuesta de monitoreo, lo que no afecta el proceso de representación del navegador.Web Worker API basados en JavaScript para realizar la encuesta de monitoreo, lo que no afecta el proceso de representación del navegador. v1.7.0Envíe automáticamente mensajes de implementación al chat del grupo Lark o WeCom: Version-Rocket llame al método Webhook proporcionado por el software de oficina colaborativo para activar los robots de chat de grupo Enviar mensajes.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
Paso 1: Importar checkVersion() y úsela
// 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 } )
Paso 2: Después de ejecutar el comando personalizado generate-version-file , genere el archivo version.json , utilizado para implementar en un servidor remoto
VERSION (opcional): cuando se requiere la versión personalizada , se pasa.
Directorio de salida de archivo (opcional): directorio de salida de versión del usuario definido por el usuario , que es el directorio DIST de forma predeterminada
EXTERNAL (opcional): cuando desea guardar más información en version.json , como el contenido modificado de la versión actual u otras cosas que deben mostrarse en la ventana emergente (utilizada en OnversionUpdate Custom UI) v1.6.0
EXTERNAL_PATH (Opcional): acepta una ruta de archivo, recomendada cuando se necesita escribir mucha información adicional en version.json . Cuando se establecen tanto EXTERNAL como EXTERNAL_PATH , la prioridad es más baja que EXTERNAL （（（（（（） v1.6.1
Uso de la versión
// 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"
. . .
} ,
...
} Uso externo v1.6.0 y external_path v1.6.1
Formato JSON Por favor use esta herramienta para escapar, haga clic aquí
// 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 " ;
}
...
}
...
}Complete los dos pasos anteriores, la función de monitoreo de la versión (a través de la administración de números de versión) se puede usar normalmente?
v1.7.0
️ Recordatorio amistoso: este método no admite mostrar "cambios de versión actuales u otra información que debe mostrarse en la ventana de solicitud". Si tiene ese requisito, utilice el método "Administración de versiones".
Importar checkVersion() y úselo
// 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 } )
Después de completar los pasos anteriores, la función de monitoreo de la versión (mediante la detección de actualizaciones en el contenido de archivo especificado) se puede usar normalmente?
// 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' ,
}
)O establecer una imagen rápida
// 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' ,
}
) 
Paso 1:
lark-message-config.json en el directorio raíz del proyecto para establecer el texto de la tarjeta de mensajeMESSAGE_PATH (opcional): aprobado si necesita personalizar la ruta del archivo o el nombre de archivo (este parámetro es útil si necesita diferenciar el entorno de implementación). De forma predeterminada, se utiliza el archivo Lark-Message-Config.json en el directorio raízPACKAGE_JSON_PATH (opcional): aprobado si necesita personalizar la ruta al archivo paquete.json (este parámetro puede ser útil para las implementaciones de proyectos Monorepo). El valor predeterminado es obtener el archivo paquete.json en la ruta raíz // 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"
. . .
} ,
...
} Paso 2: Establezca 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"
} Si la copia de su tarjeta se generará de acuerdo con las condiciones, puede pasar en el campo MESSAGE_JSON está autodefinido, como versión, título, etc.
Nota: MESSAGE_JSON debe ser escapado
// 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"
. . .
} ,
...
}O después de las variables de exportación, cita en paquete.json (no admite 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"
} 
Paso 1:
message-config.json en el directorio raíz del proyecto para establecer el texto de la tarjeta de mensajeMESSAGE_PATH (opcional): aprobado cuando necesite personalizar la ruta del archivo o el nombre de archivo (este parámetro es útil si necesita diferenciar el entorno de implementación). El valor predeterminado es usar el archivo de mensajes-config.json en el directorio raízPACKAGE_JSON_PATH (opcional): aprobado cuando se requiere una ruta personalizada al archivo Packle.json (este parámetro puede ser útil para implementaciones de proyectos Monorepo). El valor predeterminado es obtener el archivo paquete.json en la ruta raíz // 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"
. . .
} ,
...
} Paso 2: Establecer 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"
} Si la copia de su tarjeta se generará de acuerdo con las condiciones, puede pasar en el campo MESSAGE_JSON está autodefinido, como versión, título, etc.
Nota: MESSAGE_JSON debe ser escapado
// 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"
. . .
} ,
...
}O después de las variables de exportación, cita en paquete.json (no admite 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"
} 
función de verificación
Habilitar la detección de la versión de la aplicación en tiempo real
| Parámetros | Tipo | Descripción | Por defecto | Requerido |
|---|---|---|---|---|
| configuración | objeto | Elemento de configuración de monitoreo de la versión | Sí | |
| config.originversionFileUrl | cadena | La ruta al archivo versión.json en el servidor remoto | Sí | |
| config.localPackageVersion | cadena | La versión de la aplicación actual generalmente toma el campo de versión de paquete.json para comparar con el archivo versión.json del servidor remoto | Sí | |
| config.pollingtime | número | Intervalo de tiempo para el monitoreo de las encuestas, en la EM | 5000 | No |
| config.immedia | booleano | En la primera visita, el monitoreo de la versión se activará de inmediato, y luego se realizarán encuestas en un intervalo de tiempo personalizado v1.5.0 | FALSO | No |
| confeckoriginspecifiedFilesUrl | formación | Configuración de esta propiedad utilizará 'Detección de actualizaciones en el contenido de archivo especificado' en lugar de 'Gestión de números de versión' para monitorear las versiones. Pase en la lista de direcciones de archivo para ser monitoreadas, generalmente el archivo index.html bajo un cierto dominio (deduplicación automática) v1.7.0 | FALSO | |
| config.CheckorigInSpecifiedFilesUrlMode | 'One' / 'All' | 'One' significa que si el contenido de cualquier dirección de archivo en la lista cambia, se mostrará una solicitud para una actualización; 'All' significa que un mensaje para una actualización solo se mostrará cuando cambie el contenido de todas las direcciones de archivo en la lista. (Esto solo entra en vigencia cuando se configura checkOrigInSpecifiedFilesUrl) v1.7.0 | 'uno' | FALSO |
| config.enable | booleano | Si habilita el monitoreo de la versión. Este elemento de configuración se puede usar para habilitar el monitoreo de la versión solo en entornos especificados v1.7.0 | verdadero | 否 |
| config.ClearIntervalondialog | booleano | Cuando aparece el diálogo de solicitud para una nueva versión, borre el temporizador v1.7.0 | FALSO | 否 |
| config.onversionUpdate | función (datos) | Función de devolución de llamada para UI de sugerencia de versión personalizada (si desea personalizar la interfaz de usuario emergente, puede obtener el valor de retorno a través de la función de devolución de llamada para controlar la apariencia de la ventana emergente) | No | |
| config.onrefresh | función (datos) | Confirmar actualización: la función de devolución de llamada del evento de actualización personalizada, donde los datos son la última versión v1.5.0 | No | |
| config.oncancel | función (datos) | Actualización de cancelación: la función de devolución de llamada del evento Cancelar personalizado, donde los datos son la última versión v1.5.0 | No | |
| opción | objeto | Elementos de configuración para texto y temas emergentes (no personalice la interfaz de usuario emergente, pero úsela si necesita modificar el texto y los temas) | No | |
| opciones.TITLE | cadena | Título emergente | Actualizar | No |
| opciones. Descripción | cadena | Descripción emergente | V xxx está disponible | No |
| opciones.buttontext | cadena | Texto del botón emergente | Refrescar | No |
| opciones.cancelButTontext | cadena | Texto para cerrar el botón emergente (agregue esta opción, si desea que se permita la ventana emergente) v1.5.0 | No | |
| opciones.cancelmode | Ignorar la versión-corriente / ignorar-today / ignorar la ventana-corriente | Cerrar el modo emergente (entra en vigencia cuando se establece CancelButTontext) v1.5.0 | ignorar la versión de la corriente | No |
| opciones.cancelupdate ystopworker | booleano | Cuando se cancela la ventana emergente, el trabajador también se detiene (entra en vigencia cuando se establece CancelButTontext) v1.5.0 | FALSO | 否 |
| opciones.imageUrl | cadena | Imagen emergente | No | |
| opciones.RocketColor | cadena | El color del tema de la imagen emergente del cohete, después de configurar opciones. ImageUrl no es válido | No | |
| opciones.primarycolor | cadena | El color del tema de la ventana emergente, afectará el color de fondo de la imagen de sugerencia y el color de fondo del botón, después de configurar ImageUrl no es válido | No | |
| opciones. Buttonstyle | cadena | La configuración CSS de los botones emergentes puede anular el estilo de botón predeterminado | No |
Función de no verificar
Rescindir el proceso
workercreado después de llamarcheckVersion
| Parámetros | Tipo | Descripción | Por defecto | Requerido |
|---|---|---|---|---|
| Cerrado | booleano | Si cerrar la versión de actualización de la ventana emergente de solicitud | - | Sí |
| encasillero | booleano | Si cerrar el trabajador | verdadero | No |
npm run test Version-Rocket es un software de código abierto con Apache License 2.0
Web-Authn Completed-App
Vista previa en línea
Una aplicación completa basada en la API de WebAuthn, que permite a los sitios web autenticar a los usuarios con el autenticador incorporado en el navegador/sistema (como Apple Touchid y Windows Hello o Sensor biométrico de dispositivos móviles). Reemplazará las contraseñas , que es el futuro de la autenticación en línea.
