标签: sapper

我决定在我的下一个网站上试用 Svelte，这将是一个使用 GitLab 页面托管的静态网站。

我得到了生成dist/bundle.js和dist/bundle.css.

问题是我无法上传此dist文件夹，因为没有index.html文件。

如何让 Svelte/rollup 生成index.html包含初始渲染的文件？

另一种选择是创建我自己的index.html文件并导入bundle.js. 这对我来说不是一个选择，因为初始渲染现在是通过 javascript 而不是在编译时在运行时生成的，这可能会对 SEO 产生负面影响并阻止没有 javascript 的用户至少看到一些东西。

我也在看 Sapper，它进行服务器端渲染，据我所知，它在服务器端进行初始渲染。但是，这似乎需要您拥有服务器而不是渲染到文件，并且对于静态单页网站来说似乎过于复杂。

我正在创建一个 Sapper 页面，我想在其中使用Google Sign-in button。它需要data-onsuccess属性来指定回调函数。根据我从 Google 的平台 JS 库中发现的内容，它在 global/window范围内查找函数。

有没有办法从全局网页范围访问/调用 Svelte 的组件功能？它可能用于与无法直接加载import到组件中的外部库的互操作。

我正在尝试做的示例：

<script>
  function onSignComponent(user){
    console.log('Signed in');
  }
</script>

<div id="login" class="g-signin2" data-onsuccess="{onSignComponent}" data-theme="dark" />

这项工作onSignComponent在全局范围内时有效，但在组件范围内时无效。

我试图找出使用sapper设置 firestore 的最佳方法。我特别询问工兵（不是苗条）。

关于这个主题的教程很少，我看到的那些我不确定。它们涉及修改 template.html 文件——我不确定这是否是一个好主意。

因此，简而言之，我想知道将 firestore 与工兵同步的最佳实践是什么。

有任何想法吗？

谢谢。

我在一个项目中使用 Svelte 和 Sapper。假设我有一些代码需要在运行之前读取 cookie，并且该代码位于 say/profile或某处的路由中。

我的理解是 Sapper 不保证代码将在何处运行。如果我将代码放在常规<script>标签或onMount块中，当用户/profile直接从服务器请求时，代码仍会在服务器上执行（并失败），但随后会在客户端再次执行：

<script>
import { getCookie } from "../../myUtilities.js";

const myCookieValue = getCookie("myCookie");

async function myRuntimeAction() {
   let res = fetch(`https://www.example.com/api/${myCookieValue}`);
   ...
}
</script>

<form on:submit|preventDefault={myRuntimeAction}>
    <button>
      Take Action!
    </button>
</form>

是否有一种惯用的 Svelte / Sapper 方式来保证代码在可以访问 cookie 时仅在客户端运行？

使用以下语句使用最新的 sapper、svelte、nodeJS 和 rollup 堆栈注册自定义元素时未捕获的承诺。

REPL 示例：https : //svelte.dev/repl/489ee8acd10848b0bb1feb2535bd6cc5?version = 3.16.5本地创建

<svelte:options tag="parlax-background" />
    & rollup.config.js
    export default {
    client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
    replace({...})
    svelte({
    dev: !production,
    customElement: true,
    // and tried also with customElement: { tag: "my-element"}
    hydratable: true,
    emitCss: true

我想提一下，我已经在一个新项目上进行了测试

日志

[Client Side]
    => Uncaught (in promise) TypeError: Illegal constructor
    at new SvelteElement (index.mjs:1381)
    [Server Side]
    => The 'tag' option is used when generating a custom element. Did you forget …

我正在使用工兵和条纹。使用命令“npm install stripe --save”安装stripejs并按照npm指令使用包后：

 import Stripe from 'stripe';
    const stripe = new Stripe('mystripekey');

我在重新加载时出错。这是一个屏幕截图，因为我以前从未见过它，我根本不知道如何解决这个问题。它需要汇总团队/专家的某个人，并让我们知道如何解决它：

我按照说明安装了 plugin-json，它显示在 rollup.config.js 中，因此它不是条带包，但似乎汇总有错误或未处理某些内容。

这是我从这个 url安装汇总插件安装后的 rollup.config.js ：

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import json from '@rollup/plugin-json';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, …

Say I have a blog route that loads a complete array of all blog posts. The individual blog posts live at blog/[postId]. Is there a Sapper-idiomatic way to pass the data for the individual post from blog to blog/[postId]?

Essentially, if you're on blog I'd like to preload the code for displaying blog/[postId]. And then when you click a link to blog/[postId], navigate there instantly and display data from blog. But of course if you …

在工兵它可以使用this.fetch在preload()函数内部<script context="module">。然后 Sapper 确定是使用客户端还是服务器版本的fetch.

<script context="module">
    export async function preload() {
        const res = await this.fetch(`something.json`);
    }
</script>

在路由中写入所有请求并不能很好地扩展，因此必须创建一个api服务来执行以下操作：

<script context="module">
    import {getJson} from 'api';

    export async function preload() {
        const res = await getJson();
    }
</script>

这会产生一个问题，因为在preload()函数之外没有thisSapper 提供的上下文，因此this.fetch在 Node 上下文中运行时（加载应用程序的第一页并执行 SSR 时）不可用。之后所有请求都从浏览器发出，因此常规fetch可用。

一个解决方案可能是像node-fetch在 api 服务中一样为 Node 使用 HTTP 客户端，然后在运行时确定process.browser我们是否需要使用fetch或node-fetch。

有没有更好的方法来克服这个 Sapper 限制？

我正在尝试使用 sapper 创建登录表单，但在尝试测试基本 POST 获取时遇到以下问题。

在 中routes/login/login.svelte，我有以下代码，在单击按钮时调用：

<script>
  let data = {"email":"test"};

  const handleLogin = async () => {
    const response = await fetch("/login/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: data
    });
  };
</script>

这应该送什么是data对routes/login/login.js其中具有下面的代码：

export async function post(req, res, next) {
  res.setHeader('Content-Type', 'application/json');
  var data = req.body;
  return res.end(JSON.stringify(data));
}

我的问题是这仅返回{}而不是在苗条页面中发送的数据。关于为什么会发生这种情况以及我哪里出错的任何想法？谢谢。

我想导出我在其中一个文件中定义的类型并将其导入到另一个文件中。

export type myNewType = {name: string};

添加时，linter 显示以下错误export：

Modifiers cannot appear here.

我可以通过创建一个新ts文件并从中导入类型来使其工作。我只想知道是否有办法在svelte文件中定义类型。

更新：

我使用 sapper 模板，它可以正常运行，但TS功能不起作用，并在vscode从 svelte 文件导入类型和导出类型时显示错误。