标签: sveltekit

我正在使用 Sveltekit 和 Typescript。在$lib文件夹中，我有一个api.ts文件。

登录后，我正在写入 JWT 令牌session并想在文件中使用它api.ts。但我收到错误。

我正在关注这个例子： sveltejs / realworld

// login.svelte

import { session } from "$app/stores";

// After login...

$session.accessToken = response.accessToken;

// api.ts

import { session } from "$app/stores";

// Before sending request...

if ($session.accessToken) {
    // Add Bearer token to header...
}

错误：Cannot find name '$session'. Did you mean 'session'?ts(2552)

为什么这个$session东西在文件中有效.svelte，但在.ts文件中却不起作用？

我怎样才能从accessToken访问？session.ts

谢谢。

编辑

api.ts代码： …

在 svelte kit 组件样式标签中使用 tailwind 响应类（例如：md:my-auto、focus:ring-0、focus:outline-none）时，出现以下错误：

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)
    at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)
    at new Parser$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/var/www/html/node_modules/svelte/compiler.js:16919:21)
    at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)
    at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)
    at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)
    at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)

这是我的组件的代码：

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style …

我按照sveltkit 中的标准教程为基本模板创建了 Typescript 项目。

我想使用Material Web Component Button。

我npm install @material/mwc-button。

然后我只需将以下内容添加到routes/index.svelte

<script>
    import "@material/mwc-button";
</script>

我得到了SyntaxError: Cannot use import statement outside a module。

这让我发疯，因为这是我的要求的第一步，而这是被困住的第三周。我什至不知道从哪里开始。这是vite问题、sveltekit问题、mwc问题吗？任何建议都会很棒。

我正在尝试以通配符方式导入目录中图像的所有 url，并有两个可能的扩展名：

import urls from "../static/images/**/*.{png,svg}";

目前该目录中有三个文件，单独导入它们可以正常工作。当我使用此语法时，找不到文件：

无法解析从“src/routes/index.svelte”导入“../static/images/**/*.{png,svg}”。该文件存在吗？

我听说可以在 SvelteKit 中开箱即用地执行此操作，我是否需要在 jsconfig.json 文件中启用或定义导入模式才能实现此功能，或者安装依赖项？

我使用的是 Svelte+Sveltekit，没有任何路由库。

我想做的是将对象通过<a>标签（或其他方式）从另一个页面传递到路由。

在一页上我有一个对象列表，对于每个对象我渲染一个项目：

// home.svelte

<-- start of page -->
  {#each users as user}
    <a href="users/{user.username}" sveltekit:prefetch/>
  {/each}
<-- end of page -->

上面的对象user有一些我想在 - 中渲染的键值对，/users/{username}它是作为 slug 路由创建的：

// routes/users/[slug].svelte

<script context="module">
  export async function load(ctx) {
   let data = ctx.page.params;

   // I'd like to be able to pass the whole user object from the <a> tag in home.svelte, and access it from ctx.page.params if possible
        
  return { props: { slug: data.slug, user: …

我已经在本地建立了一个支持 scss 的 sveltekit 项目。但所有生成的 JS 和 CSS 都是内联的。

如何在开发时生成bundle.js和使用源映射？bundle.css

svelte.config.js ( SvelteKit v1.0.0-next.144 )

import preprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

const config = {
    kit: {
        target: '#svelte'
    },
    preprocess: preprocess({
        scss: {
            includePaths: ['src'],
            prependData: `@import 'src/style/_config.scss';`
        },
        sourceMap: true,
    }),
    compilerOptions: {
        dev: !production
    }
};

export default config;

我正在尝试将一个对象从端点传递到getSession，我相信它们都在服务器中运行。我可以获取通过 cookie 传递的值，但不能获取通过 cookie 传递的值request.locals.<variable>：

src/hooks.ts：

import cookie from 'cookie'

export async function handle({request, resolve}) {
  const cookies = cookie.parse(request.headers.cookie || '')

  request.locals.accessToken = cookies.accessToken
  request.locals.refreshToken = cookies.refreshToken

  const response = await resolve(request)

  const accessToken = `accessToken=${request.locals.accessToken || ''}; Path=/; Secure; HttpOnly;`
  const refreshToken = `refreshToken=${request.locals.refreshToken || ''}; Path=/; Secure; HttpOnly;`

  response.headers['set-cookie'] = [accessToken, refreshToken]
  
  return response
}

export async function getSession(request) {
    console.log('check request local', request.locals)
  return {
    accessToken: request.locals.accessToken,
    refreshToken: request.locals.refreshToken,
    user: request.locals.user …

我想使用 svelte-kit 为临时环境构建一个简洁的应用程序。我没有找到合适的命令作为.env.staging其配置。

当我执行时svelte-kit build总是需要.env.production

请帮助我如何构建临时环境。

如果我npm run build使用 SvelteKit 运行，它似乎包含该src文件夹中的所有文件。是否可以排除某种文件类型（例如*test.js）？

例子

1. 选择演示应用程序 npm init svelte@next my-app

2. 添加以下代码到src/routes/todos/foo.test.js

   describe('foo', () => {
     it('temp', () => {
       expect(true).toBe(false)
     })
   })
   

   Run Code Online (Sandbox Code Playgroud)

3. npm run build

4. npm run preview

结果：describe is not defined

解决方法

将测试移至外部src

我正在尝试让这个 fetch 方法在 Svelte 中工作

当 page.svelte 调用函数来获取数据时，在控制台中我收到此消息

[HTTP/1.1 405 Method Not Allowed 19ms]

我已经缩小到这个范围

POST method not allowed

我需要在配置文件中设置一个变量还是有另一个我缺少的解决方案？

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';

const config = {
    kit: {
        adapter: adapter(),
        methodOverride: {
            allowed: ['POST']
        },
    }
};

export default config;

这两个文件都位于 Routes 文件夹中

// 获取数据.js

export const POST = async(data) => {
  const response = // get data function here
  return {
    body: {
        data: response
    }
  }
}

// page.svelte

async function fetchData() {
   const …