如何在StencilJS和S3上安装CloudFront组件

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每个文件夹中都有很多东西，但是我不知道哪个文件夹和文件应该做什么。

它希望build命令生成一个包含所有所需内容的小型化文件(这就是它的工作方式吗？)因此，我最终可以在需要使用组件的地方执行如下操作：

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

开始时，模板被设计成只在页面上实际使用组件时才加载自己。这种方法有很多好处，比如简单地向任何页面添加一个脚本标记，整个库都可以使用，但是只有实际使用的组件才会被下载。

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

其中一个主要的区别是加载脚本不会自动为您注册组件，您必须手动完成每个组件(使用customElements.define()，或者使用defineCustomElements()导出来定义它们)。该输出目标的正式文档是https://stenciljs.com/docs/custom-elements。