Что такое трафарет?
Согласно официальной документации команды Stencil,
Stencil – это набор инструментов для разработчиков, предназначенный для создания многоразовых масштабируемых библиотек компонентов, приложений и систем дизайна. Он предоставляет компилятор, который создает высокооптимизированные веб-компоненты и сочетает в себе лучшие концепции самых
Проще говоря, если вы хотите создавать независимые от фреймворка многоразовые веб-компоненты, соответствующие стандартам, лучше всего подойдет Stencil.
В этом посте мы собираемся создать начальный веб-компонент с помощью Stenciljs, который можно будет использовать позже в любой среде, такой как Angular, React или Vue.
Установка трафарета
- Установите трафарет глобально в вашей системе, используя:
npm install @stencil/core@latest --save-exact -g
(Примечание: для Stencil требуется LTS-версия узла. Убедитесь, что узел установлен в вашей системе.)
2. Запустите приложение трафарета с помощью следующей команды:
npm init stencil
Вы получите 3 варианта, как показано на следующем рисунке:
Выберите третий вариант «component», чтобы следовать этой серии. Введите название проекта и подтвердите, чтобы начать, как показано ниже:
Для вас будет создана папка, как показано на следующем рисунке:
Создание вашего первого компонента трафарета
Stencil по умолчанию создаст для вас один компонент с именем my-component. Но для этой серии давайте создадим еще один компонент.
Создайте папку с именем «sten-header» и 2 файла внутри нее «sten-header.tsx» и «sten-header.css». .
Скопируйте следующий код в файл «sten-header.tsx»:
Скопируйте следующий код в файл «sten-header.css»:
Введите тег компонента в «index.html», как показано ниже:
Здесь мы используем наш пользовательский веб-компонент двумя способами:
а) Использование свойства по умолчанию, указанного в компоненте, например
<sten-header></sten-header>
б) Переопределение свойства со значением «Нет, JavaScript лучше!!!» из родительского компонента, например:
<sten-header heading="No, JavaScript is best !!!"></sten-header>
Запуск компонента трафарета
Чтобы увидеть ваш веб-компонент в браузере, введите следующую команду в терминале:
npm run start
Как видно из «package.json», этот скрипт создаст проект в режиме наблюдения. Это означает, что любые изменения, которые вы вносите в исходный файл, постоянно создаются и отображаются в браузере.
Вы обнаружите, что после запуска этой команды создается папка «dist», в которой собраны все ваши исходные файлы.
Перейдите на http://localhost:3333, чтобы увидеть изменения.
Ваш экран будет выглядеть примерно так:
И вуаля!!! Вы только что создали свой первый веб-компонент Stencil.
Ссылки:
- Официальная документация (https://stenciljs.com/)
