Te presentaremos c贸mo crear y publicar biblioteca de componentes Vue, la cual facilita el aspecto de las aplicaciones.
脷ltimamente las bibliotecas de componentes han cobrado mucha fuerza entre los desarrolladores. Muchos han utilizado una de estas bibliotecas, pero es muy diferente crear una.
Para crear esta biblioteca de componentes, se requiere utilizar vue-sfc-rollup del paquete npm. Este paquete es muy 煤til cuando se inicia una biblioteca de componentes.
Si tienes una biblioteca y deseas utilizarla, consulta la documentaci贸n que npm proporciona en la siguiente liga.
Este paquete crea un conjunto de archivos para comenzar el proyecto. Como se indica en la documentaci贸n, los archivos que se crear谩n incluyen lo siguiente (SFC representan un Single File Component):
- Configuraci贸n de rollup
- Un archivo package.json correspondiente con scripts de compilaci贸n / dev y dependencias
- Archivo m铆nimo de babel.config.js y .browserslistrc para transpilar
- Un envoltorio utilizado por el paquete acumulativo al empaquetar su SFC
- Muestra de SFC para iniciar el desarrollo
- Archivo de uso de muestra que se puede usar para cargar / probar su componente / biblioteca durante el desarrollo
La utilidad admite componentes de un solo archivo, as铆 como una biblioteca de componentes. Es importante tener en cuenta dentro de la documentaci贸n que en el modo biblioteca, tambi茅n hay un ‘铆ndice’ que indica los componentes expuestos como parte de su biblioteca.
Lo anterior significa que habr谩 algunos archivos adicionales generados en el proceso de configuraci贸n.
Construir la biblioteca
Primero debes instalar vue-sfc-rollup:
npm install -g vue-sfc-rollup
Una vez que est茅 instalado, desde la l铆nea de comando, ve al directorio donde deseas ubicar el proyecto de biblioteca. Una vez que est茅 en la carpeta, ejecuta el siguiente comando para inicializar el proyecto:
sfc-init
Elige alguna de las siguientes opciones dentro de las indicaciones:
- 驴Este es un componente 煤nico o una biblioteca? Biblioteca
- 驴Cu谩l es el nombre npm de su biblioteca? (esto tendr谩 que ser 煤nico en npm. Usa brian-component-lib)
- 驴Esta biblioteca se escribir谩 en JavaScript o TypeScript? JavaScript (deber谩s usar TypeScript)
Ingresa una ubicaci贸n para guardar los archivos de la biblioteca. El valor predeterminado ser谩 el nombre npm que le diste arriba para que puedas presionar enter.
Una vez completada la configuraci贸n, ve a la carpeta y ejecuta una instalaci贸n npm.
cd path/to/my-component-or-lib
npm install
Una vez hecho esto, puedes abrir la carpeta en el editor de tu elecci贸n.
Como se indic贸 anteriormente, hay un componente Vue de muestra creado para nosotros. Puedes encontrarlo dentro de la /src/lib-components carpeta. Para ver c贸mo se ve este componente, puede ejecutar npm run serve y navegar a http: // localhost: 8080 /
Ahora agrega un propio componente personalizado. Crea un nuevo archivo Vue dentro de la carpeta lib-components. Para este ejemplo, puedes imitar el bot贸n utilizado en las secciones de asignaci贸n de freeCodeCamp, as铆 que puedes nombrarlo FccButton.vue.
Puedes copiar y pegar este c贸digo en tu archivo:
<template>
<button class=”btn-cta”>{{ text }}</button>
</template>
<script>
export default {
name: “FccButton”, // vue component name
props: {
text: {
type: String,
default: “Enter Button Text Here”
}
},
data() {}
};
</script>
<style>
.btn-cta {
background-color: #d0d0d5;
border-width: 3px;
border-color: #1b1b32;
border-radius: 0;
border-style: solid;
color: #1b1b32;
display: block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
padding: 6px 12px;
font-size: 18px;
line-height: 1.42857143;
}
.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
background-color: #1b1b32;
border-width: 3px;
border-color: #000;
background-image: none;
color: #f5f6f7;
}
</style>
Podr谩s ver que tenemos la secci贸n de plantilla b谩sica en la parte superior con la clase deseada. Tambi茅n puedes usar el texto con que el usuario pasar谩.
Dentro de la etiqueta del script tenemos el nombre del Componente y los accesorios que tomar谩. En este caso, solo hay un accesorio llamado text que tiene un valor predeterminado que indica: “Ejecutar las pruebas”.
Tambi茅n tendr谩s algunos estilos para darle un aspecto.
Para ver c贸mo se ve el componente, necesitaremos agregarlo al archivo index.js ubicado en la carpeta lib-components. Tu archivo index.js deber铆a verse as铆:
/* eslint-disable import/prefer-default-export */
export { default as FccButton } from ‘./FccButton’;
Tambi茅n deber谩s importar el componente en el archivo serve.vue dentro de la carpeta dev para que se vea as铆:
<script>
import Vue from “vue”;
import { FccButton } from “@/entry”;
export default Vue.extend({
name: “ServeDev”,
components: {
FccButton
}
});
</script>
<template>
<div id=”app”>
<FccButton />
</div>
</template>
Es posible que debas ejecutar npm run servenuevamente para poder ver el bot贸n, pero deber铆a estar visible cuando navegues a http: // localhost: 8080 / en el navegador.
Hasta ahora hemos construido el componente que quer铆amos. Deber谩s seguir este mismo proceso para cualquier otro componente que quieras construir. Solo aseg煤rate de exportarlos en el archivo /lib-components/index.js para que est茅n disponibles en el paquete npm que vamos a publicar.
Publicaci贸n en NPM
Ahora que estamos listos para publicar la biblioteca en NPM, necesitaremos pasar por el proceso de compilaci贸n para que se empaquete y quede lista para funcionar.
Antes de ejecutar el comando de compilaci贸n, recomendamos cambiar el n煤mero de versi贸n en el archivo, package.json 0.0.1ya que este es el primer evento de publicaci贸n para nuestra biblioteca. Ten por seguro que desearemos m谩s de un solo componente en la biblioteca antes de lanzar la ‘primera’ versi贸n oficial. Puede leer m谩s sobre las versiones sem谩nticas aqu铆 https://docs.npmjs.com/about-semantic-versioning
Para hacer esto, debemos correr la funci贸n npm run build.
Como dice la documentaci贸n:
La ejecuci贸n de la escritura de la estructura en 3 archivos compilados en el directorio dist uno para cada uno de main, moduley unpkg las propiedades que estar谩n en el archivo de package.json. Con estos archivos generados, se podr谩 comenzar.
Con este comando ejecutado, estamos listos para publicar en NPM. Antes de hacer esto, aseg煤rate de tener una cuenta en NPM.
A continuaci贸n, necesitaremos agregar la cuenta a la terminal ejecutando:
npm adduser
Comprendiendo package.json
Cuando publicamos en npm, utilizamos el archivo package.json para controlar qu茅 archivos se publican. Si observas el archivo package.json que se cre贸 cuando configuramos inicialmente el proyecto, ver谩s algo como esto:
“main”: “dist/brian-component-lib.ssr.js”,
“browser”: “dist/brian-component-lib.esm.js”,
“module”: “dist/brian-component-lib.esm.js”,
“unpkg”: “dist/brian-component-lib.min.js”,
“files”: [
“dist/*”,
“src/**/*.vue”
],
La secci贸n debajo files le dir谩 a npm que publique todo en nuestra carpeta dist as铆 como cualquier archivo .vue dentro de nuestra carpeta src. Puedes actualizar esto como mejor te parezca.
Debido a que no estamos cambiando nada con el archivo package.json, estamos listos para publicar. Para hacer eso solo necesitamos ejecutar el siguiente comando:
npm publish
Puedes ir a npmjs.com y encontrarlo en el registro.
Le铆ste: C贸mo crear y publicar biblioteca de componentes Vue, te recomendamos: c贸mo instalar PHP en Windows
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode
