Javascript 在dist/folder中创建文件夹的目的是什么？_Javascript_Ionic Framework_Stenciljs_Micro Frontend

Javascript 在dist/folder中创建文件夹的目的是什么？

javascript ionic-framework

Javascript 在dist/folder中创建文件夹的目的是什么？,javascript,ionic-framework,stenciljs,micro-frontend,Javascript,Ionic Framework,Stenciljs,Micro Frontend,我正在使用stenciljs处理web组件。它是一个伟大的库，用于创建我们可以在任何地方重复使用的web组件。我想知道模具编译器是如何工作的。我的意思是，当我创建任何组件的构建时，它会在dist中创建多个文件夹，当我们必须使用该组件时，我们只需要添加1或2个文件，如下所示。（我使用bit.dev上传我的组件）同时，我尝试了使用react的同一组件，但在react中，他们并没有创建多个类似于模具的文件夹下面是模具创建的文件夹列表，它是dist文件夹 cjs 收藏 esm esm-es5 手

我正在使用

stenciljs

处理web组件。它是一个伟大的库，用于创建我们可以在任何地方重复使用的web组件。我想知道模具编译器是如何工作的。我的意思是，当我创建任何组件的构建时，它会在

dist

中创建多个文件夹，当我们必须使用该组件时，我们只需要添加1或2个文件，如下所示。（我使用bit.dev上传我的组件）

同时，我尝试了使用react的同一组件，但在react中，他们并没有创建多个类似于模具的文件夹

下面是模具创建的文件夹列表，它是

dist

文件夹

cjs

esm

esm-es5

手风琴的

类型和一些index.js文件

所以我的问题是所有这些文件夹的用途是什么。我担心这一点，因为当我在一些微型前端应用程序中收集所有模块时，我不希望所有组件都有这么多文件夹

因此，如果我能理解它的用途，我就可以在我的微型前端应用程序中调试和管理重复的文件夹和代码

谢谢你的帮助

更新

我已经用模具检查了爱奥尼亚和它的构建，所以当我在爱奥尼亚和检查

www

文件夹中构建hello word应用程序时，它包含了我在整个应用程序中没有使用过的所有组件的chunck。。它是3MB！！！！如果我不使用，为什么要导入所有组件事件

在这种情况下，我已经尽力了。。当我在react中添加模具组件时，每个组件只有一个文件，然后同一问题：仅为模具的一个组件生成多个文件。react的其他地方只有一个文件：）这不是很酷吗？：）

“缩写dist代表distributable，指的是一个存储文件的目录，其他人可以直接使用该目录，而无需编译或缩小重复使用的源代码。”-是的，我理解dist文件夹的含义。。但我担心的是，当我在某个comman micro应用程序中使用2个单独的组件时，此all文件夹仍在构建中，因此我只想知道实际使用情况，以便我可以忽略不需要的filesAFAIK，浏览器只下载主脚本和名称空间文件夹-在您的情况下是'accorbian.js'和'accorbian'文件夹。感谢您的回复@G.Tranter我不知道浏览器在组件情况下如何工作。您可以分享一些知识以便我自己检查吗：）使用浏览器的开发控制台。在Chrome中，您可以查看sources选项卡以查看加载到文档中的内容，还可以使用network选项卡查看请求。

<!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>