Sapper/Svelte.js - 如何指定客户端资产位置？答案

【问题标题】：Sapper/Svelte.js - How to specify client-side assets location?Sapper/Svelte.js - 如何指定客户端资产位置？
【发布时间】：2019-12-14 01:28:48
【问题描述】：

我有一个已在 AWS Lambda 上成功运行的 Sapper.js 应用程序。 Lambda 能够将 Sapper 创建的服务器端生成的 HTML 交付给 AWS API Gateway，然后由 AWS API Gateway 将应用程序提供给用户。我正在使用 S3 来托管客户端资产（脚本、webpack 块等）。 S3 存储桶与 API Gateway 位于不同的域中。

我遇到的问题是我需要为这些脚本设置一个资产前缀，以便 Sapper 可以找到它们。目前我所有的客户端脚本都包含相对链接，看起来像这样：<script src="/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script> 我需要让它们看起来像这样：<script src="https://AWS_S3_BUCKET_ENDPOINT.com/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script>

查看Sapper docs，我看到我可以为客户端和服务器指定一个基本网址。但是，更改此基本 url 会破坏我的应用程序并导致 Lambda 渲染页面返回 404 错误。

我知道在使用 Next.js 时，我可以通过修改 next.config.js 文件来包含以下内容来完成此操作：

module.exports = {
  assetPrefix: "https://AWS_S3_BUCKET_ENDPOINT.com/client",
}

但我不知道如何在 Sapper 中执行此操作。我需要修改捆绑器（使用 webpack）配置吗？还是有其他方法？

谢谢。

【问题讨论】：

标签： javascript amazon-s3 webpack svelte sapper

【解决方案1】：

我想我已经明白了。

我不得不更改两个工兵文件。首先我进入sapper/dist/webpack.js 并修改如下：

'use strict';

var __chunk_3 = require('./chunk3.js');

var webpack = {
    dev: __chunk_3.dev,

    client: {
        entry: () => {
            return {
                main: `${__chunk_3.src}/client`
            };
        },

        output: () => {
            return {
                path: `${__chunk_3.dest}/client`,
                filename: '[hash]/[name].js',
                chunkFilename: '[hash]/[name].[id].js',
                // change this line to point to the s3 bucket client key
                publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com/client"
            };
        }
    },

    server: {
        entry: () => {
            return {
                server: `${__chunk_3.src}/server`
            };
        },

        output: () => {
            return {
                path: `${__chunk_3.dest}/server`,
                filename: '[name].js',
                chunkFilename: '[hash]/[name].[id].js',
                libraryTarget: 'commonjs2'
            };
        }
    },

    serviceworker: {
        entry: () => {
            return {
                'service-worker': `${__chunk_3.src}/service-worker`
            };
        },

        output: () => {
            return {
                path: __chunk_3.dest,
                filename: '[name].js',
                chunkFilename: '[name].[id].[hash].js',
                // change this line to point to the s3 bucket root
                publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com"
            }
        }
    }
};

module.exports = webpack;
//# sourceMappingURL=webpack.js.map

然后我必须修改sapper/runtime/server.mjs，以便main 变量指向存储桶，如下所示：

...

const main = `https://AWS_S3_BUCKET_ENDPOINT.com/client/${file}`;

...

使用基本的 sapper webpack 模板进行测试，我可以确认脚本已成功从 s3 存储桶加载。到目前为止，这一切看起来都不错。我将在接下来使用sapper build 命令来实现它，这样我就可以将这些黑客作为命令行参数传递，这样我就不必每次都对其进行硬编码。

现在，我不确定随着应用程序变得越来越复杂，这是否会持续下去。查看sapper/runtime/server.mjs 文件，我看到req.baseUrl 属性在几个不同的位置被引用，我不知道我的黑客行为是否会导致任何问题。或者其他任何地方都在这方面的工兵。

如果有人在阅读 Sapper 内部结构方面的更多经验，如果我搞砸了，请在 cmets 中告诉我 ?

【讨论】：