Herramientas Open-wc para desplegar proyectos con Web Components

La Comunidad de Desarrolladores de Web Components se denomina Open-Wc. No depende de ninguna librería o framework concreto y es totalmente abierto. Su principal cometido es proporcionar a la comunidad herramientas que permitan el uso fácil y rápido de Web Components, que es justo lo que haremos en este tutorial.

Proyectos basados en LitElement

Con NodeJS instalado en el sistema, cuyos requisitos deberán de ser una versión 10 con npm 6 o superior, vamos a la consola y en la carpeta de nuestros proyectos lanzamos el siguiente comando:

npm init @open-wc

Un asistente se abrirá y comenzará a solicitarnos una serie de acciones.

1. Iniciar un nuevo proyecto o hacer una actualización de alguno que tengamos.
2. Qué estamos construyendo:
   1. Proyecto de componente web.
   2. Proyecto de aplicación sencilla.
   3. Proyecto de aplicación más avanzada.
3. Añadidos del proyecto, como un sistema de linting, que mejorará la calidad y estandarización del código, uno de testing para componentes y aplicaciones, una demo del componente para ver qué haría, o un sistema de build, que nos permitirá construir los archivos que llevaremos a a producción.
4. Para empaquetar el código nos ofrece dos soluciones. Rollup y Webpack, siendo Rollup el recomendado por ser más cómodo de configurar y porque aprovecha la característica de los ES6 modules, que se encuentran en los navegadores actuales.
5. En este paso se solicitará que le indiquemos qué partes vamos a incorporar en el scaffolding, para que nos cree archivos de ejemplo para demo, building, etc.
6. Finalmente, deberemos poner el nombre del componente o de la aplicación.

Finalizados los pasos anteriores nos indicarán la estructura del proyecto a producir y a continuación los comando a ejecutar para así comenzar el proyecto en local.

El comando es el siguiente:

npm run start

Herramientas disponibles

Las herramientas que nos ofrece open-wc, las tendremos disponibles lanzando comandos desde la consola. Los más utilizados y que seguramente necesitarás son los siguientes:

• start (npm run start): Abre el servidor de desarrollo con el proyecto corriendo.
• build (npm run build): Ejecuta el mecanismo de producción de los archivos. Los archivos compilados, minimizados, etc., estarán en la carpeta «dist», carpeta que también tendremos que incorporar cuando llevamos el proyecto a producción.
• start:build (npm run start:build): Este comando ejecuta el proyecto desde la carpeta de producción.

Customizar el proyecto

Si quieres personalizar tu flujo de trabajo y agregar complementos, deberás conocer las herramientas que open-wc usa por debajo, como Rollup o Webpack. Por ejemplo, a la hora de dar soporte en los navegadores más antiguos, como explicamos a continuación.

Si queremos tener la capa de compatibilidad para IE11, deberemos editar el código de un archivo y que será diferente si usamos Webpack o Rollup.

• En el caso de Rollup. Al editar rollup.config.js, veremos una línea con un import de una dependencia llamada modern-config y que tendremos que sustituirla por modern-and-legacy-config, de este modo:

  import createDefaultConfig from '@open-wc/building-rollup/modern-and-legacy-config';

• En el caso de Webpack. Por defecto lo tendremos activado, aunque si necesitamos cambiarlo, editaremos el archivo webpack.config.js, donde intercambiaremos la dependencia, entre modern-config y modern-and-legacy-config. La línea que debemos editar es:

  const createDefaultConfig = require('@open-wc/building-webpack/modern-and-legacy-config');

Publicado el 24/02/2023 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.