svelte component template

Шаблон компонента SVELTE 3

Высокоопинированная база для строительства общих компонентов Svelte 3

Оглавление

1. Функции
2. Начиная
3. Развитие
4. Препроцессоры
5. Тестирование
6. Публикация в NPM
7. Часто задаваемые вопросы

Функции

• Предварительная обработка
• Формирование
• Лининг
• Сборник рассказов
• Тестирование

Начиная

1. Клонировать шаблон:

Вариант № 1: клонировать его с помощью опции GitHub «Использовать этот шаблон»:

Вариант № 2: клонировать этот репозиторий с помощью Degit:

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

2. Введите папку:

 cd my-new-component

2. Инициировать git:

git init

3. Установить зависимости:

npm install

3. Настройка package.json :

npm init

4. Начать кодирование:

code .

• Исходный код вашего компонента живет в src/lib/[MyComponent]/[MyComponent].svelte .

Развитие

1. Start Sveltekit:

npm run dev

2. Измените файл компонента в src/lib , сохраните его и посмотрите, как происходит волшебство.

3. Экспортируйте свои компоненты в src/lib/index.js .

4. Импортируйте свои компоненты в src/routes/index.svelte из `$ lib $, чтобы вы могли просмотреть и проверить его.

5. Перейдите в Localhost: 3000, чтобы увидеть ваши компоненты в прямом эфире.

Препроцессоры

Вся предварительная обработка обрабатывается с помощью стройного процесса. Настройте его в svelte.config.js .

Тестирование

Тестирование взаимодействия

Это простой и интуитивно понятный метод, который можно сделать с помощью сборника рассказов с помощью Cypress. И пример и предварительные тестовые сценарии можно найти в этом репозитории, и дополнительную информацию можно найти в документах Storybook.

Тестирование снимка

В этом репо вы найдете основной рабочий процесс, который использует Chromatic для тестирования снимков.

Часто задаваемые вопросы

Для чего файл index.js ?

Стэйт может иметь возможность импортировать несколько компонентов из одного источника.

Например, это позволяет пользователю делать:

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

Вместо:

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

Как мне включить в свои компоненты CSS с 3 -м вечеринками?

Есть несколько вариантов, чтобы сделать это:

1. Не включайте в себя 3 -й вечеринки CSS и просто говорите своим пользователям сделать это (вероятно, используя PostCS).
2. Включите его через CDN, например:

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

Публикация в NPM

1. Подготовьте пакет для публикации:

npm run package

2. Публикуйте пакет:

 cd package
npm run publish

• Создание и публикация общенациональных пакетов
• Создание и публикация публичных пакетов не затопленных