Сейчас я тестирую stencil js. На данный момент я хочу написать компоненты трафарета и включить их в проект VUE / React. На официальном веб-сайте stencil уже показано, как интегрировать их в структуру (https://stenciljs.com/docs/overview). Но они предполагают, что ваша собственная библиотека компонентов трафарета уже опубликована в npm.
Есть ли способ локально интегрировать компоненты трафарета в структуру для их тестирования без предварительной публикации?
Да, для этого вы можете использовать npm-link.
cd my-component-lib
npm link
cd ../my-app
npm link my-component-lib # or whatever you have named the project in package.json
Если у вас есть какие-либо проблемы с этим (например, если пути не разрешаются должным образом), вы также можете попробовать упаковать свой пакет и вместо этого установить упакованную версию, используя npm-pack:
cd my-component-lib
npm pack
cd ../my-app
npm install ../my-component-lib/my-component-lib-1.0.0.tgz
Однако связывание предпочтительнее, потому что изменения в вашей библиотеке компонентов будут отражены немедленно (после перестройки), тогда как при упаковке вам придется переупаковывать и переустанавливать ее после каждого изменения в вашей библиотеке.
Вместо публикации или упаковки пакетов вы можете использовать функцию сопоставления путей TypeScript..
Это позволяет вам писать операторы импорта так же, как и в случае с опубликованным пакетом, но «за кулисами» TypeScript сопоставляет импорт с указанным местоположением исходного кода.
Вот пример tsconfig.json с сопоставлением пути, добавленным в параметры компилятора:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"ui-components": ["libs/ui-components"],
"ui-components/loader": ["libs/ui-components/dist/loader/index.cjs.js"],
"ui-components-react": ["generated/ui-components-react/src/components.ts"]
},
...
Как видите, у него есть 3 сопоставления: путь к основным компонентам Stencil ui-components, путь к сгенерированным компонентам React, которые отображаются как ui-components-react, а также сгенерированный загрузчик ui-components/loader, который обеспечивает мост между пользовательскими элементами и React обертки.
Я создал полный рабочий пример для Stencil Web Components со сгенерированными привязками и оболочками для React, который поставляется без необходимости публикации какого-либо пакета: Nx Stencil React.
Обратите внимание, что этот ответ основан на @stencil/core 1.14.0 или ниже. В будущих версиях может быть другой подход к созданию интеграции фреймворка.
Для локальной интеграции вы можете ссылаться на файл esm.js внутри папки www/build, который можно использовать в теге заголовка проекта Vue / React.
Например, если у вас есть 2 приложения ниже
stencil-components - компоненты трафарета
stencil-react - пример приложения для реагирования, которое будет потреблять компоненты.
Как только вы запустите stencil-components до npm run start, он будет размещен по адресу 3333 (по умолчанию). Включение строки ниже в заголовке ofindex.html of stencil-react будет интегрировать компоненты с живой перезагрузкой при изменении.
<script type="module" src="http://localhost:3333/build/stencil-components.esm.js"></script>
