如何在 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。

To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.

如果您想生成包含所有组件的单个包，可以使用名为 dist-custom-elements-bundle 的输出目标。对于与 dist 的差异，您可以查看上面相同的文档 link。

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

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

How to setup StencilJS components on S3 and CloudFront

node.js

amazon-s3

amazon-cloudfront

web-component

stenciljs