Como criar um Packege npm ?
Hoje veremos o comando NPM na criação de pacotes npm.
Criando sua conta no npm
Primeiro precisamos ter uma conta no site npm
Adicione sua conta ao npm na sua maquina
$ npm adduser [nome do usuario]
Criando o projeto
$ npx tsdx create mylib
Criando o componente
Nesse exemplo usaremos styled-components
então instale antes de continuar o tutorial
$npm install styled-componentes && npm install @types/styled-componets
Agora sim, criamos o componente
import React from "react";
import { ReactNode } from "react";
import ThemeProvider from "../../provider/theme-provider";
import styled from "styled-components";
interface ButtonStyleProps {
variant: string
}
export const ButtonStyle = styled.button<ButtonStyleProps>`
${({theme, variant})=>{
return {
color: theme[variant].text,
backgroundColor: theme[variant].background,
padding: '10px 20px',
cursor: 'pointer',
fontWeight: '500',
margin: '10px 0',
width: '100%',
}
}}
`
export interface ButtonProps {
children: ReactNode
variant?: 'dark' | 'light';
onclick: (e: React.MouseEvent<HTMLButtonElement>) => void;
type?: 'submit' | 'button' | 'reset';
name?: string;
}
export function Button({
children,
onclick,
name='formulario',
type = 'submit',
variant = 'light'
}: ButtonProps){
return (
<ThemeProvider>
<ButtonStyle
name={name}
type={type}
onClick={onclick}
variant={variant}>
{children}
</ButtonStyle>
</ThemeProvider>
)
}
Versionando a lib
Existem 3 formas de versionamento, patch, minor, major, cada uma com um propósito diferente. Conforme explicado abaixo.
O comando npm version patch
O comando serve para atualizar apenas uma Correção: quando corrigir falhas mantendo compatibilidade.
EX: 0.1.0
Apos o comando 0.1.1
$ npm version patch
O comando npm version minor
O comando serve para atualizar versão Menor: quando adicionar funcionalidades mantendo compatibilidade, e
EX: 0.1.0
Apos o comando 0.2.0
$ npm version minor
O comando npm version major
O comando serve para atualizar versão Maior: quando fizer mudanças incompatíveis na API,
EX: 0.1.0
Apos o comando 2.0.0
$ npm version major
O comando npm publish
O comando serve para publicar o projeto
$ npm publish
Criando um script
Podemos criar um script para rodar na linha de comando e agilizar as coisas.
Adicione na parte de script do packege.json a linha de código "deploy" : "npm version patch && npm publish"
em seguida rode o comando:
$ npm run deploy
Assim enviaremos nosso projeto para o npm
Usando nossa lib
Para usar a lib basta instalar ela via npm ou yarn
$ npm install [nome da lib]
Top comments (0)