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-wcAdvertencia
npm init requiere node 14 & npm 6 o superior
É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 andamioCaracterí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