4

我正在使用stenciljs. 它用于创建我们可以在任何地方重复使用的 Web 组件的出色库。我想知道模板编译器是如何工作的。我的意思是当我创建任何组件的构建时，它会在其中创建多个文件夹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>

同时，我尝试使用 react 相同的组件，但在 react 中，它们并没有像模板一样创建多个文件夹。

所以这里是模板创建的文件夹列表是dist文件夹

  1. cjs
  2. 收藏
  3. esm
  4. esm-es5
  5. 手风琴
  6. 类型和一些 index.js 文件

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

所以如果我能理解它的用法，我可以在我的微前端应用程序中调试和管理重复的文件夹和代码。

任何帮助表示赞赏

更新

我已经使用模板检查了 ionic 及其构建，所以当我在 ionic 中构建 hello word 应用程序并检查www文件夹时，它包含我在整个应用程序中没有使用的所有组件的块。它的 3 MB ！！！！如果我不使用它，为什么要离子导入所有组件事件？

在这种情况下，我已经尝试过最好的反应..当我在反应中添加模板组件时，每个组件只有一个文件，然后相同的问题为一个组件生成多个文件，仅在其他地方只反应一个文件:) 不是这样凉爽的 ？:)

4

0 回答 0