如何在 S3 和 CloudFront 上设置 StencilJS 组件

Question

我有一些组件，我想将它们部署到 S3 中并让它们可以通过 CloudFront 访问。

我的问题是我不知道需要将哪些文件上传到 S3 以及 CloudFront 需要将哪个文件作为入口点。

这是我的stencil.config.tsx：

import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'stencil-test',
    taskQueue: 'async',
    outputTargets: [
        {
            type: 'dist',
            esmLoaderPath: '../loader',
            dir: './build/dist'
        },
        {
            type: 'www',
            serviceWorker: null // disable service workers
        }
    ]
};

我尝试执行生成几个文件夹的npm run build：build/loader 和build/dist 每个文件夹中有很多东西，但我不知道哪些文件夹和文件应该做什么。

它希望构建命令会生成一个包含所有需要的东西的缩小文件（这是它的工作原理吗？）所以我最终可以在我想使用我的组件的地方执行以下操作：

<script type="module" src='https://cdn.jsdelivr.net/npm/my-name@0.0.1/dist/myname.js'></script>

谁能提供一些指导或向我指出任何资源？

Answer 1

www 输出目标用于生成应用程序，与组件库无关。要托管您的组件，您应该上传整个生成的 dist 文件夹。仅下载客户端需要的文件，这取决于客户端及其访问的组件（延迟加载）。所以你不必担心文件的数量。见https://stenciljs.com/docs/distribution。

首先，Stencil 被设计为仅在页面上实际使用组件时才延迟加载自身。这种方法有很多好处，例如只需在任何页面上添加一个脚本标签，整个库都可以使用，而只下载实际使用的组件。

---

如果您想生成包含所有组件的单个包，则有一个名为 dist-custom-elements-bundle 的输出目标。对于 dist 的不同之处，您可以查看上面的相同文档链接。

主要区别之一是加载脚本不会自动为您注册组件，您必须手动为每个组件执行此操作（使用 customElements.define()，或使用 defineCustomElements() 导出全部定义它们. 该输出目标的官方文档是https://stenciljs.com/docs/custom-elements。