permalink: 'init/index.html' title: Crear Web Components section: guides tags:

• guides

Crear Web Components

Andamiaje para proyectos en Web components

Usage

npm init @reboot-wc

Éste proceso iniciara un menú guiado através de todas las opciones disponibles

$ npm init @reboot-wc
npx: installed 14 in 4.074s

██████╗ ███████╗██████╗  ██████╗  ██████╗ ████████╗     
██╔══██╗██╔════╝██╔══██╗██╔═══██╗██╔═══██╗╚══██╔══╝   Open Web Components
██████╔╝█████╗  ██████╔╝██║   ██║██║   ██║   ██║   
██╔══██╗██╔══╝  ██╔══██╗██║   ██║██║   ██║   ██║   
██║  ██║███████╗██████╔╝╚██████╔╝╚██████╔╝   ██║   Estándares para un desarrollo web moderno más rápido
╚═╝  ╚═╝╚══════╝╚═════╝  ╚═════╝  ╚═════╝    ╚═╝     

          Ctrl+C or Esc para salir


    ¿Que deseas hacer? › - Utiliza las flechas. Enter para selecionar.
    ❯  Crear andamio arquetipo para un nuevo proyecto
       Actualizar un proyecto existente

Opciones

Se pueden pasar parametros para saltarse las preguntas del wizard parcialmente o en su totalidad

| Option | Type | Description | | | ----------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --- | | --destinationPath | path | La ruta donde el generador escribirá los archivos to | | | --type | scaffold|upgrade | scaffold para crear un andamio en un nuevo proyecto o upgrade para actualizar un proyecto existente | | | --scaffoldType | wc|app | El tipo de proyecto a crear el andamio. wc para un componente simple o app para una aplicación | | | --features | linting|testing|demoing|building | Qué características incluir. linting, testing, demoing, o building | | | --typescript | true|false | Si se desea utilizar TypeScript en el proyecto | | | --tagName | string | La etiqueta para el web component o elemento shell | | | --installDependencies | yarn|npm|false | Si se desea instalar dependencias. Elegir npm o yarn para instalarlas o false para saltar la instalación | | | --writeToDisk | true|false | ¿Escribir los archivos al disco? | | | --help | | Este mensaje de ayuda | |

Generador de Andamio

Éste generador te ayuda a iniciar una nueva app o web component. Creará una nueva carpeta y configurará todo lo necesario para iniciar inmediatamente.

Ejemplo de uso:

npm init @reboot-wc
# Seleccionar "Andamiar un nuevo proyecto"

Generadores de Andamio disponibls:

• Web Component Este generador crea un andamio inciial de proyecto para crear un web component. Se recomienda cuando se desea desarrollar y publicar un componente individual.

• Application Este generador crea un andamio inicial de proyecto para crear una aplicación. Se recomienda cuando se desea iniciar un proyecto basado en web components

Características

Los generadores anteriores son el campo de juego ideal para prototipar. Se puede agregar linting, testing, demo y building cuando sea necesario.

Ejemplo de uso:

cd existing-web-component
npm init @reboot-wc
# seleccionar "Actualizar un proyecto existente" o agregar características  mientras se realiza el andamio

Características dispponibles para actualización

• Linting Este generador agrega una configuracion completa de lintin con ESlint, Prettier, Husky y commitlint

• Testing Este generador agrega una configuración completa de pruebas con Web Test Runner y Puppeteer

• Demoing Este generador agrega una configuración completa con Storybook

• Building Este generador agrega una configuración crompleta con Rollup