www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Публикация и интеграция веб-компонента StencilJS в React

Дата публикации Oct 3, 2019

фотоСай Киран АнаганинаUnsplash

Веб-компоненты многократного использования приносят солнечный свет в день разработчиков. А как так можно спросить? Эти веб-компоненты могут быть легко настроены путем присвоения значений определенным реквизитам и могут использоваться в ваших интерфейсных проектах в виде HTML-тегов.

Это означает, что вам не нужно пересоздавать компоненты в каждом проекте, и кулер по-прежнему заключается в том, что вы можете использовать эти компоненты независимо от используемой вами библиотеки интерфейса, будь то React, Angular или Vue.

Эта статья является второй частью ранее опубликованной статьиСоздание повторно используемого веб-компонента с помощью StencilJSкоторый работал как руководство по созданию многократно используемого аккордеонного компонента с использованием StencilJS от начала до конца.

На этот раз мы рассмотрим, как создать тот же компонент для производства, как опубликовать его в npm, а затем повторно использовать этот компонент в приложении React, созданном с помощью create-реагировать-приложение.

Сборка компонента

Если вы прошли первую часть статьи, у вас был бы работающий веб-компонент многократного использования, созданный с помощью StencilJS. Вы сможете использовать тег html и предоставлять значения для цвета, ширины, метки и описания, что делает его легко настраиваемым. Репо для этого компонента доступноВот,

Имея готовые файлы Typescript, CSS и HTML компонента аккордеона, теперь вы можете собрать компонент для производства, запустив его в корневой папке вашего терминала:

npm run build

Издательство в нпм

Затем вы можете подготовиться к публикации компонента npm, отредактировав файл package.json с именем, которое вы хотите использовать для опубликованного пакета. У вас также есть возможность предоставить ссылку на хранилище и ваше имя в качестве автора пакета.

Это будет видно наhttps://npmjs.com/package/имя пакета, заменяяимя пакетас названием вашей посылки. В этом случае я назвал свой компонент аккордеона как компонент аккордеона-трафарета.

{
"name": "accordion-stencil-component",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/allynkalda/Accordion-Component-Using-StencilJS.git"
},
}

После завершения сборки вы можете запустить его в корневой папке вашего терминала:

npm publish

Интеграция компонента в приложение React

Чтобы проверить интеграцию этого опубликованного веб-компонента в приложение React, вы можете создать образец приложения React, выполнив следующую команду в своем терминале:

npx create-react-app name-of-app

Это создаст новое приложение React, в которое будет вставлен тег html нашего компонента в файл App.js. Здесь мы сможем настроить и использовать компонент StencilJS. Обязательно запустите npm install, чтобы загрузить все зависимости.

Все, что нам нужно сделать для завершения интеграции, это установить пакет npm, который мы только что опубликовали в качестве зависимости, запустив в терминале только что созданного приложения React следующее:

npm install accordion-stencil-component --save

Затем нам нужно будет включить библиотеку компонентов, вызвавdefineCustomElements(window)из файла index.js, как указано в документации по трафарету для интеграции React. Мы можем сделать это, вставив это в наш файл index.js:

Затем мы можем импортировать наш компонент в наш файл App.js и использовать тег html в нашем коде:

И вуаля! Вы можете увидеть, как легко настроить веб-компонент, созданный на трафарете, и повторно использовать его в приложении React. Не стесняйтесь смотреть на репозиторий приложения React с компонентом StencilВоти вы можете найти первую часть этой статьиВот,

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map