0.1.1 • Published 2 years ago
@nadirss14/component-library v0.1.1
Libreria de componentes de React
Requisitos
- Tener una cuenta en NPM. Sino tienes una podes crearla aqui.
- Tener instalado npm en tu equipo.
- Git.
- Visual Studio Code.
- Una terminal.
- Acceso a internet.
Dependencias
Babel para poder transpilar el codigo
npm i --save-dev @babel/cli @babel/core @babel/preset-env npm i @babel/polyfill
Estructura del proyecto
- Dentro de
src
debemos crear la carpetalib
. Dentro delib
creamos la carpetacomponents
la cual contendra los componentes que exportaremos. - Cada componente tendra su propia carpeta con sus estilos correspondientes, en este ejemplo estamos utilizando
CSS Modules
. - En la raiz de la carpeta
lib
creamos un archivo llamadoindex.js
el cual sera nuestro punto de entrada a los componente, basicamente vamos a importar los componetes desde la carpetacomponents
y los vamos a exportar. - En la raiz del proyecto debemos agregar el archivo
babel.config.json
con la siguiente configuracion basica.
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
],
"@babel/preset-react"
]
}
package.json
{
"name": "@nadirss14/component-library",
"description": "Example of react component library",
"version": "0.1.0",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"scripts": {
"build:npm": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files"
}
}
description
: descripcion corta de los que es el paquete. Package name guidelinesversion
: controla las versiones del paquete. Semantic versioningmain
: Especifica el punto de estrada a la aplicacion.files
: Listado de archivos que debemos incluir en el paquete.scripts
: Listado de scripts que ejecutaremos sobre el proyecto.- El script
build:npm
se encarga que de hacer el transpilado de los archivos de la carpetalib
y generar los nuevos archivos copilados dentro de la carpetadist
para ser publicados en NPM.
- El script
Publish NPM
- Login with npm
npm login
- Por defecto
npm
viene configurado para publicar unicamente paquetes privados, para cambiar esto ejecutamos el siguiente comando en la terminal.
npm config set access public
- Publicar el paquete.
npm publish