Crie a biblioteca de componentes Vue3 a partir de 0 (oito): use o release-it para realizar o gerenciamento automático e liberar a biblioteca de componentes

Use release-it para gerenciar automaticamente a biblioteca de componentes de lançamento

O artigo anterior empacotou nossa biblioteca de componentes e este artigo apresentará como publicar uma biblioteca de componentes. Obviamente, o que este artigo apresenta definitivamente não é tão simples quanto publicar.

Biblioteca de componentes lançada

pnpm initO pacote que queremos publicar é denominado easyest após empacotamento, então a geração é realizada sob 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 alguns dos campos

• principal

Arquivo de entrada da biblioteca de componentes

• módulo

Se o ambiente que usa a biblioteca de componentes suporta esmodule, o arquivo de entrada se torna este campo

• arquivos

Publicar no diretório de arquivos no npm

• efeitos colaterais

Ignore o código que tem efeitos colaterais causados ​​pela trepidação da árvore, como o código do componente empacotado contém

import "./xxx.css"

Isso tornará a ferramenta de compilação incapaz de saber se esse código tem efeitos colaterais (ou seja, se o código em outros arquivos importados será usado); portanto, ao compilar, ele empacotará totalmente o código e perderá a função de importação automática sob demanda de esmodule. Portanto, adicionar o campo sideEffects pode informar à ferramenta de compilação que esse código não produzirá efeitos colaterais e você pode ter certeza de que o tremor da árvore

• digitações

Declare a entrada do arquivo
e execute pnpm publish no diretório de empacotamento. Observe que você estará conectado à conta npm neste momento. Caso contrário, você pode acessar o site oficial para se registrar. Antes de publicar, você deve enviar o código para o warehouse ou adicione o sufixo pnpm publish --no- Apenas git-checks, faça login no npm para ver o pacote que você acabou de liberar

publicar automaticamente

Sempre que a versão acima é atualizada, precisamos atualizar manualmente a versão, marcar manualmente, etc., o que é muito inconveniente. Em seguida, usaremos o release-it para gerenciar esses

Primeiro instale globalmenterelease-it

pnpm add release-it -D -w

Em seguida, adicione o script script e o endereço git warehouse ao package.json no arquivo empacotado mais 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"
  }
}

Crie um novo publish/index.ts no diretório de script para tarefas de publicação

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());

Adicionar scripts de comando gulp para executar publish/index.ts no arquivo package.json no diretório raiz

  "scripts": {
    
    
    "build:easyest": "gulp -f packages/components/script/build/index.ts",
    "publish:easyest": "gulp -f packages/components/script/publish/index.ts"
  },

Em seguida, envie nossas alterações e execute-as pnpm run publish:easyest, e descobriremos que ele nos permite escolher como atualizar a versão, publicar, adicionar uma tag etc.
Após a seleção, nossa biblioteca de componentes é lançada com sucesso e um github é tag também adicionada com sucesso