svelte component template

Plantilla de 3 componentes

Una base altamente opinionada para construir componentes de SVelte 3 compartibles

Tabla de contenido

1. Características
2. Empezando
3. Desarrollo
4. Preprocesadores
5. Pruebas
6. Publicación a NPM
7. Preguntas frecuentes

Características

• Preprocesamiento
• Formación
• Pelusa
• Libro de cuentos
• Pruebas

Empezando

1. Clon la plantilla:

Opción #1: clonelo con la opción "Usar esta plantilla" de GitHub:

Opción #2: Clon este repositorio con DEGIT:

npx degit YogliB/svelte-component-template ` my-new-component `

2. Ingrese la carpeta:

 cd my-new-component

2. Iniciar git:

git init

3. Instalar dependencias:

npm install

3. Configurar package.json :

npm init

4. Comience a codificar:

code .

• El código fuente de su componente vive en src/lib/[MyComponent]/[MyComponent].svelte .

Desarrollo

1. Comienza Sveltekit:

npm run dev

2. Edite un archivo de componentes en src/lib , guárdelo y vea la magia.

3. Exporte sus componentes en src/lib/index.js .

4. Importe sus componentes en src/routes/index.svelte desde `$ lib $, para que pueda obtener una vista previa y probarlo.

5. Navegue a Localhost: 3000 para ver sus componentes en vivo.

Preprocesadores

Todo el preprocesamiento se maneja con brúbulo esbelto. Configurarlo en svelte.config.js .

Pruebas

Prueba de interacción

Este es un método simple e intuitivo que se puede hacer a través del libro de cuentos, con la ayuda de Cypress. Y el ejemplo y los scripts de prueba prefabricados se pueden encontrar en este repositorio, y se puede encontrar más información en los documentos de Storybook.

Prueba de instantánea

En este repositorio encontrará un flujo de trabajo básico que usa cromático para las pruebas de instantáneas.

Preguntas frecuentes

¿Para qué sirve el archivo index.js ?

Es para que SVELTE pueda importar múltiples componentes de una sola fuente.

Por ejemplo, permite que el usuario haga:

 import { MyComponent , MyOtherComponent } from 'my-component-library' ;

En lugar de:

 import MyComponent from 'my-component-library/components/MyComponent.svelte' ;
import MyOtherComponent from 'my-component-library/components/MyOtherComponent' ;

¿Cómo incluyo CSS de fiesta de 3'RD en mis componentes?

Hay algunas opciones para hacer esto:

1. No incluya CSS de fiesta 3'RD y solo diga a sus usuarios que lo hagan (probablemente usando PostCSS).
2. Incluirlo a través de un CDN, como así:

 @import url ( 'https://unpkg.com/@scope/package/main.min.css' );

Publicación a NPM

1. Prepare el paquete para la publicación:

npm run package

2. Publicar el paquete:

 cd package
npm run publish

• Creación y publicación de paquetes públicos de alcance
• Creación y publicación de paquetes públicos no cotizados