Введение
Vue - это мощный фреймворк JavaScript, разработанный на основе компонентного подхода. Vue предоставляет инструменты для создания масштабируемых одностраничных приложений и упрощает процесс. Компонент в нашем контексте - это независимый строительный блок, который можно легко повторно использовать в одном или нескольких приложениях.
Библиотека компонентов может обеспечить согласованный язык дизайна между частями вашего приложения (или между приложениями) и ускорит процесс разработки. Использование такой библиотеки поможет вам сосредоточиться на композиции, а не на повторной реализации.
Внедрение этой методологии в наши проекты оказалось для нас правильным решением. Поэтому я решил написать это руководство, в котором описывается, как создавать, структурировать, тестировать и связывать библиотеку компонентов Vue. Мы будем использовать синтаксис в стиле класса Vue с Typescript, Jest для тестирования, Storybook для визуального тестирования и документации и Webpack в качестве нашего сборщика.
Конфигурация проекта
Начните с установки @ vue / cli - это поможет нам сформировать наш проект vue:
npm install -g @vue/cli
Затем выполните следующую команду:
vue create components-library
Для наших нужд мы выберем «Выбрать функции вручную»; сразу после этого обязательно выберите следующее: Typescript (синтаксис компонента в стиле класса), пре-процессоры CSS (Scss), модульное тестирование (Jest).
Давайте добавим сборник рассказов в наш проект, мы поговорим об этом позже, а пока просто следуйте инструкциям по установке:
vue add storybook
Здорово! теперь у нас есть пустой проект приложения vue, благодаря @ vue / cli это было очень просто.
Структура каталогов
Чтобы сделать этот проект основанным на компонентах, нам нужно внести некоторые изменения, удалив ненужные файлы, папки и выполнив некоторую реструктуризацию.
Во-первых, мы хотим удалить ненужные файлы и папки, поэтому просто удалите следующее: общая папка, папка с ресурсами, App.vue, HelloWorld.vue, main.ts и папка тестов (не беспокойтесь, файлы тестов будут включены в папка компонента) - из-за цели нашего проекта они нам больше не понадобятся.
Во-вторых, мы хотим убедиться, что структура папок нашего проекта совместима с нашими потребностями. Мы должны добавить по 3 файла в каждую папку компонентов: компонент Vue, тестовый файл и файл сборника рассказов в одной папке. В этом примере я решил создать компонент "Кнопка".
Важное примечание: не забудьте обновить путь к тестам в файле jest.config.js.
module.exports = {
preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
testMatch: ["**/components/**/*.spec.[jt]s?(x)"]
};
Наш первый компонент
Ну наконец то! к забавным вещам. Мы реализуем базовый компонент кнопки, который запускает событие при нажатии, а также может быть отключен путем передачи свойства.
Давай протестируем!
Создавая библиотеку компонентов - вы хотите быть уверены, что потребители вашего проекта получают стабильный и рабочий код, поэтому очень важно включать тесты в разработку. Умение написать хороший тест показывает, что вы полностью понимаете назначение вашего компонента и его использование. Кроме того, это улучшает ваши навыки программирования, поскольку вы обнаружите, что пишете четко определенный фрагмент кода, который можно легко тестировать и поддерживать. Если вы мне не верите, попробуйте написать модульный тест для спагетти-кода - вы быстро поймете мою мысль 😉
Итак, после этого небольшого вступления, давайте вернемся к нашему компоненту Button и попытаемся понять его назначение. В нашем случае наша реализация довольно проста, когда мы нажимаем кнопку, компонент должен генерировать событие щелчка; Однако, когда кнопка отключена, событие щелчка не должно запускаться.
Мы будем использовать @ vue / test-utils для загрузки нашего компонента в изолированной среде и Jest в качестве набора инструментов для тестирования.
Здорово! Наш тест для нашего компонента Button готов, давайте запустим его:
npm run test:unit
Сборник рассказов
Теперь, когда мы убедились, что наша логика работает должным образом, я настоятельно рекомендую написать Сборник рассказов для каждого компонента, который вы разрабатываете. Таким образом вы сможете проводить визуальное тестирование своего компонента, а комбинирование модульного тестирования и визуального тестирования обеспечивает стабильность вашего компонента пользовательского интерфейса.
Storybook также предоставляет широкий спектр инструментов для тестирования ваших компонентов с различными входами, экранами, доступностью и т. Д. Кроме того, это простой способ документировать ваши компоненты.
Хорошо, рассказ написан - давайте запустим:
npm run storybook:serve
Приложение Storybook по умолчанию открывается на localhost: 6006.
Одним из основных преимуществ Storybook является то, что им легко делиться. Таким образом, ваша команда сможет взаимодействовать с компонентами, смотреть на код и понимать, как его использовать.
Если вы хотите создать приложение Storybook, выполните следующую команду:
npm run storybook:build
Будет создана папка Storybook-static, и вы сможете развернуть ее на своем любимом хостинге и поделиться ею со своей командой.
Собери это!
Теперь у нас есть наш замечательный компонент кнопки, который протестирован со всех сторон, пришло время связать его с библиотекой. По умолчанию @ vue / cli снова проделал невероятную работу и предоставил нам простой интерфейс, который помогает нам встроить наш проект в библиотеку с помощью webpack, дополнительную информацию см. здесь.
Прежде всего, давайте создадим index.ts внутри папки src, он будет служить точкой входа для наших потребителей библиотеки и будет единой точкой для регистрации всех компонентов.
Выполните следующую команду в терминале, чтобы начать процесс сборки:
vue-cli-service build --target lib --name components-library ./src/index.ts
Результатом процесса сборки было 4 файла, давайте разберемся с каждым из них:
- components-library.umd.js: пакет UMD (Universal Module Definition) можно использовать непосредственно в браузере как модуль.
- components-library.umd.min.js: минимизированный пакет UMD.
- components-library.common.js: пакет CommonJS, который может использоваться другими сборщиками, этот файл будет использоваться в качестве точки входа.
- components-library.css: файл CSS, извлеченный из компонентов.
Затем мы хотим добавить точку входа в нашу библиотеку, мы добавим ее в package.json:
"main": "./dist/components-library.common.js"
Теперь мы хотим внести в белый список файлы, которые будут включены в наш пакет npm, добавьте это в package.json:
"files": [ "dist/*"]
Если вы хотите добавить другие файлы, не стесняйтесь добавлять их в этот массив.
Потребление вашей библиотеки
Теперь вы можете использовать пакет npm как зависимость в других ваших проектах. Вы можете использовать его локально, настроив ссылку npm, или просто опубликовать его в npm и установить в своем проекте.
Чтобы запустить локально, перейдите в каталог проекта и запустите:
npm link
Это создаст глобальную символическую ссылку на пакет. Затем перейдите в каталог потребляющего проекта и запустите:
npm link components-library
Теперь ваш пакет связан с проектом локально, после чего вы хотите его установить, npm распознает символическую ссылку и разрешит локальную версию:
npm i components-library
Чтобы опубликовать пакет:
npm publish --access public
Теперь вы можете установить свой пакет из основного реестра npm.
Вывод
Использование этой методологии может быть очень хорошей практикой и поможет вам организовать компоненты в отдельный проект. Использование этой библиотеки в качестве зависимости в других ваших приложениях обеспечит единообразный язык дизайна и ускорит время разработки.
Совместное использование компонентов через сборник рассказов дизайнерам и другим разработчикам в вашей команде поможет им лучше понять компоненты. Все эти преимущества в совокупности обеспечивают отличную прочную основу для ваших будущих проектов.
Вы можете найти репозиторий GitHub здесь:
