lord-my

Creación de una librería en npm

1.- Configuración de la librería y build

Se crea un proyecto en vueJs

npm init vue@latest

or

vue create nombre-del-proyecto

Se instalan dependencias

npm i

Se crea un archivo index.js en la misma carpeta del componente

import component from "./HelloWorld.vue"; // Se importa el componente deseado

export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("HelloWorld", component); //Nombre del componente a crear, debe ser igual al nombre del componente.vue
}

const plugin = {
  install,
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.Vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;

Se crea una carpeta build en la raíz del proyecto donde se creara el archivo rollup.config.js

import vue from "rollup-plugin-vue";
import buble from "rollup-plugin-buble";
import css from "rollup-plugin-css-only";
import styles from "rollup-plugin-styles";
import image from "@rollup/plugin-image";

export default {
  input: "src/components/index.js",
  output: {
    name: "HelloWorld", // este nombre debe coincidir con el componente creado en el index.js
    exports: "named",
    // format: "cjs", se puede usar para definir un formato en especifico
  },
  plugins: [
    vue({
      css: false,
      compileTemplate: true,
      template: {
        isProduction: true,
      },
    }),
    buble({ exclude: ["**/*.css"] }),
    css({
      output: "bundle.css", // crea el archivo bundle.css donde copiara todos los css del componente
    }),
    styles(), // incorpora los estilos al dist
    image(), // incorpora las imágenes al dist
  ],
};

Se configura el package.json se agregan dependencias necesarias

"devDependencies": {
    "@rollup/plugin-image": "^3.0.2",
    "rollup": "^3.19.1",
    "rollup-plugin-buble": "^0.19.8",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-scss": "^4.0.0",
    "rollup-plugin-styles": "^4.0.0",
    "rollup-plugin-vue": "^6.0.0",

  }

Se agregan los scripts del build

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-lib": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/hell-word.umd.js --bundleConfigAsCjs",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/hello-word.esm.js --bundleConfigAsCjs",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/hello-word.min.js --bundleConfigAsCjs"
  },

Nota

• Es necesario agregar el --bundleConfigAsCjs para que no se necesite poner el formato

Se agrega la configuración de la información que tendrá el npm en la librería, se hace en la raíz del package.json

"name": "lord-my",
  "version": "0.1.9",
  "main": "dist/hello-world.umd.js",
  "module": "dist/hello-world.esm.js",
  "unpkg": "dist/hello-world.min.js",
  "browser": {
    "./sfc": "src/hello-world.vue"
  },
  "description": "Prueba 9",
  "files": [
    "dist/*",
    "src/*",
    "assets/*"
  ],
  "keywords": [
    "LORD",
    "vue"
  ],
  "author": "OSY",
  "license": "MIT",

Nota

• El name debe ser uno único que este permitido en npm, la notación es Kebab Case (contar-elementos)
• La version debe de cambiar cada vez que se realice una publicación
• La licencia MIT permite que sea libre de usar por el publico
• El main, module indican que nombre se le darán a los archivos del dist
• El files indica que archivos se copiaran en la dist

Se instalan dependencias

npm i

Se realiza el build

npm run build-lib

Nota

• En este ejemplo se ejecuta el build-lib, pero debe ejecutarse el build configurado en tu package.json, si todo sale bien debera de construirse la carpeta dist en la raiz del proyecto con los archivos js y el css.

2.- Publicación en npm

Se necesita tener una cuenta en npm (https://www.npmjs.com/)

npm login

• Se solicitara el usuario, la contraseña y la autentificación de segundo paso que anteriormente al crear la cuenta en npm se configuraron

Se publica

npm publish --access public

• Se necesita poner el --access public para que la cuenta gratuita permita publicar, si se tiene la cuenta de paga, se puede publicar con npm publish, pero sera privada la publicación

3.- Utilizar la librería en un proyecto

Se crea un proyecto en vueJs

npm init vue@latest

or

vue create nombre-del-proyecto

Se instalan dependencias

npm i

Se instala nuestra librería con el comando que se creo en nuestra publicación de npm

npm i lord-my

Se configura el archivo main.js para poder utilizar el componente de la librería

import { createApp } from "vue";
import App from "./App.vue";
import HelloWorld from "../node_modules/lord-my/dist/hell-word.umd"; // el nombre de la importación debe coincidir con el nombre del componente configurado

createApp(App).use(HelloWorld).mount("#app");

• Se importa desde los node_modules en la carpeta del nombre de la librería en la carpeta dist, se escogerá el js

Se utiliza el componente dentro del componente padre

<template>
  <h1>HOLA SOY componente padre</h1>

  <h1>Yo soy el componente de la librería Lord-my instalada</h1>
  <HelloWorld msg="Lord My" />
</template>

<script setup>


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  src="../../node_modules/lord-my/dist/bundle.css">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Nota

• Se llama la etiqueta del componente con el nombre configurado en el main.js
• Si se necesitan los css se importan, si se tiene el atributo scoped en la etiqueta style, se necesita quitar para que los css afecten al componente

-Para validar que la librería esta instalada verificar que se encuentre en el package.json

 "dependencies": {
    "core-js": "^3.8.3",
    "lord-my": "^0.1.9",
    "vue": "^3.2.13"
  },

NOTA EXTRA

• Para registrar un registro en servidor

To publish your first package just:
1. Create user
npm adduser --registry http://10.22.53.219:4873/

2. Publish
npm publish --registry http://10.22.53.219:4873/

3. install
npm install --registry http://10.22.53.219:4873/ nombre-del-componente