Какова цель созданных папок в dist/folder в StencilJS?

Я работаю с веб-компонентами, используя stenciljs. Это отличная библиотека для создания веб-компонентов, которые мы можем повторно использовать где угодно. Мне было интересно, как работает компилятор трафаретов. Я имею в виду, что когда я создаю сборку любого компонента, он создает несколько папок внутри dist, и когда нам нужно использовать компонент, нам просто нужно добавить 1 или 2 файла, как показано ниже. (Я использовал bit.dev для загрузки моего компонента)

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="module" 
    src="./node_modules/@bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.esm.js">
    </script>
    <!-- <script nomodule=""

    src="./node_modules/@bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.js">
    </script> -->

</head>
<body>
  <accordian></accordian>
</body>
</html>

в то же время я пробовал тот же компонент, используя реакцию, но в реакции они не создают несколько папок, таких как трафарет.

Итак, вот список папок, которые создает трафарет, это папка dist

  1. cjs
  2. коллекция
  3. Эсм
  4. esm-es5
  5. аккордеон
  6. типы и некоторые файлы index.js

поэтому мой вопрос в том, какая польза от всех этих папок. Я беспокоюсь об этом, потому что, когда я собираю все свои модули в каком-то микро-интерфейсном приложении, мне не нужна такая большая папка для всех компонентов.

поэтому, если я понимаю, как это использовать, я могу отлаживать дубликаты папок и код и управлять ими в своем микроинтерфейсном приложении.

любая помощь приветствуется

ОБНОВЛЕНИЕ

Я проверил ionic и его сборку с помощью трафарета, поэтому, когда я создаю сборку приложения hello word в ionic и проверяю папку www, она содержит все фрагменты компонентов, которые я не использовал во всем своем приложении.. его 3 МБ !!!! почему ionic импортирует все события компонента, если я его не использую ??

Я пытался реагировать наилучшим образом в этих случаях ... только один файл для каждого компонента, когда я добавляю компонент трафарета в реакцию, тогда та же проблема генерирует несколько файлов для одного компонента только для трафарета, где еще для реакции только один файл :) не так ли прохладно ? :)


ionic-framework javascript micro-frontend stenciljs
person Kishan Oza    schedule 15.10.2019    source источник
comment
Краткая форма dist означает «распространяемый» и относится к каталогу, в котором будут храниться файлы, которые могут быть напрямую использованы другими без необходимости компилировать или минимизировать повторно используемый исходный код. -stackoverflow.com/questions/22842691/   -  person Thodoxicate    schedule 15.10.2019
comment
да, я понимаю значение папки dist ... но меня беспокоит то, что когда я использую 2 отдельных компонента в каком-то микроприложении comman, все эти папки все еще находятся в сборке, поэтому я просто хотел узнать, как на самом деле использовать, чтобы я мог игнорировать ненужные файлы   -  person Kishan Oza    schedule 15.10.2019
comment
Насколько я знаю, браузер загружает только основной скрипт и папку пространства имен - в вашем случае "accordian.js" и папку "accordian".   -  person G. Tranter    schedule 15.10.2019
comment
Спасибо за ваш ответ @G.Tranter. Я не знаю, как работает браузер в случае компонента. Можете ли вы поделиться некоторыми знаниями, чтобы я также мог проверить сам :)   -  person Kishan Oza    schedule 16.10.2019
comment
Используйте консоль разработчика вашего браузера. В Chrome вы можете просмотреть вкладку источников, чтобы увидеть, что загружено в документ, и вы можете использовать вкладку сети для просмотра запросов.   -  person G. Tranter    schedule 16.10.2019
comment
расширяя комментарий @KishanOza, в основном вы добавляете только основной скрипт в DOM в вашем случае «accordian.js», и этот скрипт лениво загружает файл входа компонента в вашем случае «accordian.entry.js» из папки аккордиана. Поэтому, когда вы заглянете в консоль разработчика, вы можете сначала увидеть только основной скрипт, файл компонента загружается, когда компонент вставляется в DOM stenciljs.com/blog/how-lazy-loading-web-components-work   -  person Bilal Alam    schedule 25.10.2019