标签: sapper

在我的 sapper 应用程序中，我将一些数据存储在 src/data/videoslist.json 的 json 文件中，这是一个 json 格式的对象数组。

我需要检索索引页中的数据以将其传递给组件。这是我在 src/routes/index.svelte 顶部的代码

<script context="module">
    export async function preload() {
        const response = await this.fetch('../data/videoslist.json');
        const responseJson = await response.json();
        return {
            videos: responseJson
        }
    }
</script>

我收到错误 500

invalid json response body at http://127.0.0.1:3000/data/videoslist.json reason: Unexpected token < in JSON at position 0

该文件是纯json，没有别的。意外的标记 < 让我认为返回的是 404 而不是文件。

你知道我做错了什么吗？我用 ../ ./ 或将文件移动到路由文件夹尝试了很多路径变体，但没有任何效果。

PS：我仍然是 js 和框架方面的新手，对于更了解的人来说，我可能错过了一些非常基本的东西:)（就像您无法使用 fetch 检索本地文件）。

我正在使用带有波尔卡的苗条/工兵。在加载任何页面之前，我有一些初始值要从 Web 服务中获取并存储在会话中。执行此操作的最佳推荐方法是什么。

我尝试在根目录中的 _layout 中执行此操作。但由于提取是异步的，因此在第一次页面加载时值不可用。

我想在我的Sapper项目中使用类属性和私有字段。显然，它们现在必须由babel进行预处理。

我试图将相应的babel插件添加到rollup.config.js中，只是为了实现一些目的。

1. babel汇总插件仅在旧版模式下使用。
2. 服务器部分根本不使用babel。

我试图将babel汇总插件添加到这样的服务器插件的末尾，

babel({
    extensions: ['.js', '.mjs', '.html', '.svelte'],
    runtimeHelpers: true,
    exclude: ['node_modules/@babel/**'],
    plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-methods',
    ],
}),

但这似乎根本没有生效。

我也将其添加到客户端插件中（在旧版条目之前），但是它抱怨我需要添加@babel/plugin-syntax-dynamic-import，因此babel似乎必须识别整个语法才能进行预处理，而且我真的不想编译动态导入适用于现代浏览器。

如何在sapper中启用esnext语法？

我刚开始学习苗条。在阅读了一些工兵文档后，我看到工兵使用文件名和文件夹结构进行路由，如果我想要 /blog/:article 之类的东西，它可能会创建一个包含“博客”名称和文件“[slug].svelte”的文件夹，我如何构建更复杂的路线？示例：/blog/:article/comments/:commentId

在 nuxts/vue 中有一个别名 @ 和 ~ 表示应用程序的根。在 sapper/svelte 中是否有类似于 /very/deep/page/1/2/3/4 这样的深路线中的东西我不必做类似的事情：

import Head from '../../../../../../../../components/Thingy.svelte'

我正在使用带有快递的苗条/工兵。

我有一个 api routes/billing/index.js

它需要从中获取数据 customers/[customernumber]/detections.js

我的问题是如何使用相对 URL 从路由文件夹中的内部 apis 中获取数据

async function getDataFromGateway(customerNumber) {
  if (typeof fetch !== 'function') {
    global.fetch = require('node-fetch')
  }
  const data = await fetch(`http://localhost:19052/customers/${customerNumber}/detections`)
    .then(res => res.json())
    .catch(error => {
      console.log(error)
      return error
    }
    )
  return data
}

有没有办法使用相对网址来做到这一点

我已经用nodejs 创建了一个restful api，并且计划使用sapper/svelte 作为前端。最后，这些将是单独的应用程序，我想在具有相同域的同一服务器上运行它们。这种做法合理吗？如果是，我的 nginx 配置文件应该是什么样子？如果不是，我的方法应该是什么？

这是我的 api 的配置：

server {
    server_name domain.name;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
   .
   .
   .
}

我遇到登录后会话未填充的问题，但如果我手动刷新页面，它就会填充。因此，作为一种解决方法，我尝试在登录成功后重新加载登录页面，以便会话中填充数据。

如何使用 goto？我厌倦了 goto('/') 但它打开了索引页。我正在寻找动态的东西，而不是使用页面名称。

有人知道如何在不重新加载页面的情况下填充会话吗？session 被填充到 server.js coed 中的 'sapper.middleware' 中。

我正在尝试在我的 Sapper 构建的网站中设置 AdSense，但没有成功。我已将代码添加到 template.html 文件中并且它可以工作，但我想使用组件在特定页面上显示它。

目标是在资源页面的侧边栏上显示广告（见图）。它上面的小部件是由 index.svelte 页面加载的组件，因此我想对广告执行相同的操作。

资源页面

目前，我有以下几点：

• template.html 文件中的 AdSense 脚本，然后
• 在组件 OnMount 函数中，我从 template.html 文件中获取 Adsense 代码，并将其放置在 div 内的组件上，然后将其从 template.html 文件中删除。

模板.html

<footer>
    <!-- GoogleAdsence Script. -->
    <div id="gAdsense-code" style="display: none;">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-X0X0X0X0X0X0X" crossorigin="anonymous"></script>
        <!-- Resource page Ad -->
        <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-X0X0X0X0X0X0X"
            data-ad-slot="X0X0X0X0X0X0"
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>   
    </div>
</footer>

adswidget.svelte

<script>

    import { onMount } from 'svelte';

onMount(() => {

        window.addEventListener( 'load', () => {
             //get ads-widget div …

我正在开发一个新网站，虽然我们在本地开发时一切正常，但当我们尝试在 Vercel 上部署时遇到了问题。该应用程序为页面和 API 使用 Sapper 框架，以及我们通过 Mongoose 访问的 MongoDB Atlas 中的数据库。我们在本地的行为是我们建立npm run dev了一个单一的数据库连接，该连接一直持续到我们关闭应用程序。

但是，当它被部署到 Vercel 时，建立数据库连接并打印“数据库连接成功”消息并且只应该运行一次的代码会在每个 API 请求上运行

这似乎很快就失控了，达到了我们数据库 500 个连接的限制：

结果，在网站被一个用户短暂使用后，我们的一些 API 请求开始失败并出现此错误（我们让 db 接受任何连接而不是 IP 白名单，因此错误给出的建议没有帮助） ：

我们的实现是mongoose.connect在 .js 文件中调用：

mongoose.connect(DB, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useFindAndModify: false,
    useUnifiedTopology: true
}).then(() => console.log("DB connection successful!")).catch(console.error);

然后我们import在 Sapper 的server.js. 我们能够找到的建议是“只缓存连接”，但这并没有成功，而且似乎更重要node-mongodb-native。无论如何，这是我们尝试过的，在本地没有更好或更糟的效果，但也没有解决 Vercel 上的问题：

let cachedDb = {};

exports.connection = async () => {
    if (cachedDb.isConnected)
        return;
        try {
            const …