Use release-it para administrar automáticamente la biblioteca de componentes de lanzamiento
El artículo anterior ha empaquetado nuestra biblioteca de componentes, y este artículo presentará cómo publicar una biblioteca de componentes. Por supuesto, lo que este artículo presenta definitivamente no es tan simple como publicar.
Biblioteca de componentes lanzada
pnpm initEl paquete que queremos publicar se llama easyest después de packaging, por lo que la generación se realiza bajo easyestpackage.json
{
"name": "easyest",
"version": "1.0.0",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
}
Explique algunos de los campos.
- principal
Archivo de entrada de la biblioteca de componentes
- módulo
Si el entorno que usa la biblioteca de componentes es compatible con esmodule, el archivo de entrada se convierte en este campo
- archivos
Publicar en el directorio de archivos en npm
- efectos secundarios
Ignore el código que tiene efectos secundarios causados por la sacudida del árbol, como el código del componente empaquetado que contiene
import "./xxx.css"
Esto hará que la herramienta de compilación no pueda saber si este código tiene efectos secundarios (es decir, si se usará el código de otros archivos importados), por lo que, al compilar, empaquetará completamente el código y perderá la función de importación automática bajo demanda. de esmódulo. Por lo tanto, agregar el campo sideEffects puede decirle a la herramienta de compilación que este código no producirá efectos secundarios, y puede estar seguro de que el movimiento del árbol
- mecanografías
Declare la entrada del archivo
y ejecute la publicación pnpm en el directorio de empaquetado. Tenga en cuenta que iniciará sesión en la cuenta npm en este momento. De lo contrario, puede ir al sitio web oficial para registrarse. Antes de publicar, debe enviar el código al warehouse o agregue el sufijo pnpm publicar --no- Solo git-checks, inicie sesión en npm para ver el paquete que acaba de lanzar
publicación automática
Cada vez que se actualiza la versión anterior, debemos actualizar manualmente la versión, etiquetar manualmente, etc., lo cual es muy inconveniente. A continuación, usaremos release-it para administrar estos
Primera instalación globalrelease-it
pnpm add release-it -D -w
Luego agregue la secuencia de comandos y la dirección del almacén de git al paquete.json en el archivo empaquetado más fácil
{
"name": "easyest",
"version": "1.0.1",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
"scripts": {
"release": "release-it"
},
"repository": {
"type": "git",
"url": "https://github.com/qddidi/easyest"
}
}
Cree una nueva publicación/index.ts en el directorio de secuencias de comandos para tareas de publicación
import run from "../utils/run";
import {
pkgPath } from "../utils/paths";
import {
series } from "gulp";
export const publishComponent = async () => {
run("release-it", `${
pkgPath}/easyest`);
};
export default series(async () => publishComponent());
Agregue el comando gulp de los scripts para ejecutar la publicación/index.ts en el archivo package.json en el directorio raíz
"scripts": {
"build:easyest": "gulp -f packages/components/script/build/index.ts",
"publish:easyest": "gulp -f packages/components/script/publish/index.ts"
},
Luego envíe nuestros cambios y ejecútelos pnpm run publish:easyest, y encontraremos que nos permite elegir cómo actualizar la versión, si publicar, si agregar una etiqueta, etc. 
Después de la selección, nuestra biblioteca de componentes se libera con éxito y se crea un github también se agregó correctamente la etiqueta
