如何在Sapper/Polka中让所有Svelte组件访问JSON数据文件

别担心，刚上手Svelte和Sapper的时候有这类基础问题太正常啦！我来帮你把Express里的逻辑平移到Sapper/Polka环境中～

1. 引入你的template.json文件 #

和Express一样，在Sapper的Node环境（不管是服务器端代码还是组件的context="module"部分），你可以直接用CommonJS或者ES模块的方式引入JSON文件：

• 如果你用CommonJS（比如项目没配置ES模块）：

  const template = require('./path/to/template.json');
  

• 如果是ES模块（Sapper默认支持，或者你的项目配置了"type": "module"）：

  import template from './path/to/template.json' assert { type: 'json' };
  

注意调整路径，确保能正确找到你的template.json文件。

2. 实现动态页面路由（对应Express的/:pageName） #

Sapper有两种常用的路由方式，你可以根据习惯选：

方式一：用Sapper的文件系统路由（推荐） #

这是Sapper的标准玩法，不需要手动写路由代码：

1. 在src/routes目录下创建一个名为[pageName].svelte的组件文件——这个方括号就代表动态参数，会匹配所有/xxx形式的路径。
2. 在组件里用preload函数（Sapper的服务器端预加载机制）获取数据并传给组件：

<script context="module">
  // 这里引入template.json，路径根据你的文件位置调整
  import template from '../../template.json';

  export async function preload({ params }) {
    // 先根据pageName从template里找到对应页面的数据
    const targetPage = template.pages?.find(page => page.slug === params.pageName);
    
    // 如果找不到对应的页面，返回404
    if (!targetPage) {
      this.error(404, '页面不存在');
    }

    // 把template和页面数据返回，组件就能拿到这些值了
    return { template, targetPage };
  }
</script>

<script>
  // 接收preload传过来的数据
  export let template;
  export let targetPage;
</script>

<!-- 现在就可以像Pug里那样使用这些数据啦 -->
<h1>{targetPage.title}</h1>
<p>网站名称：{template.siteName}</p>
<div>{targetPage.content}</div>

方式二：用Polka手动写路由（类似Express的router.get） #

如果你更习惯Express那种手动定义路由的方式，也可以在src/server.js里配置：

import polka from 'polka';
import { render } from '@sapper/server';
import template from './template.json'; // 引入静态数据

const app = polka();

// 定义动态路由
app.get('/:pageName', async (req, res) => {
  const { pageName } = req.params;
  const targetPage = template.pages?.find(page => page.slug === pageName);

  if (!targetPage) {
    res.writeHead(404);
    res.end('页面不存在');
    return;
  }

  // 调用Sapper的render函数，渲染对应的路由组件并传参
  await render(req, res, {
    page: '/[pageName]', // 对应你创建的动态路由组件路径
    props: { template, targetPage } // 传给组件的参数
  });
});

// 别忘了保留Sapper默认的中间件和静态文件服务
import { middleware } from '@sapper/server';
import express from 'express';
app.use(express.static('static'), middleware);

app.listen(3000, err => {
  if (err) console.log('error', err);
});

小提示 #

如果你的template.json完全是静态数据，不需要服务器端校验，也可以直接在客户端组件里引入使用，不过用preload的好处是能提前在服务器端处理数据（比如404判断），提升用户体验。

内容的提问来源于stack exchange，提问作者anoop chandran