Вопрос или проблема
Я создаю полностью статический веб-сайт с помощью SvelteKit. Я использую версию @sveltejs/adapter-static 3.0.5.
Я хочу загрузить на свою веб-страницу простую таблицу. По различным причинам совместимости и обмена, я хотел бы хранить эту таблицу в известном формате данных, таком как csv, json, parquet и т.д.
Первый вопрос: С учетом последнего дизайна SvelteKit, где должны находиться эти файлы?
Должны ли они находиться в папке static? Или в верхнем уровне папки data? Или в папке $lib/data?
Второй вопрос: Как только я решу, где лучше всего разместить эти файлы, какой предполагаемый/лучший способ загрузки этих файлов?
Структура моего проекта соответствует шаблонной схеме:
src/
├── app.html
├── index.test.js
├── lib
│ ├── data
│ │ └── data_1000.csv
│ └── index.js
└── routes
├── +layout.js
├── +page.js
└── +page.svelte
В самом верху +page.svelte выглядит так:
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
+layout.js выглядит так:
export const prerender = true;
а +page.js выглядит так:
/** @type {import('./$types').PageLoad} */
export function load() {
...
}
Я пробовал использовать API fetch, но получил ошибки, связанные с невозможностью использовать относительные маршруты (думаю, это связано с использованием пути файловой системы вместо URL), и я не смог заставить require fs из документации Node работать.
Расположение на самом деле не имеет такого большого значения, но static в основном предназначено для ресурсов, которым нужен фиксированный путь, например, таких как robots.txt.
Если данные используются в многих местах, $lib — хорошее место. Если они актуальны только для одного маршрута, вы можете разместить их непосредственно в каталоге этого маршрута.
Для получения данных я использовал бы import. Если данные текстовые, вы можете, например, использовать ?raw как параметр запроса, чтобы получить содержимое. Это функция Vite, которая не обрабатывает бинарные данные должным образом.
Для любого другого формата найдите или создайте плагин Vite, который, например, проверяет расширение файла и читает содержимое файла так, как это имеет смысл для формата. Поскольку плагин выполняется во время сборки, у вас есть доступ к полным API Node, которые могут читать файл и делать с ним все, что угодно.
(Если путь может быть несколько динамичным, например, разные файлы загружаются в зависимости от взаимодействия пользователя, вам, вероятно, потребуется использовать глобальный импорт, используя этот подход.)
Ответ или решение
Давайте разберем, как загружать данные в полностью статическом (предварительно отрендеренном) приложении SvelteKit, используя различный формат данных, такой как CSV, JSON, YAML, Parquet и др.
Вопрос 1: Где должны храниться файлы данных?
Согласно современному дизайну SvelteKit, оптимальным местом для хранения файлов данных являются следующие каталоги:
src/lib/data: Если данные используются в нескольких местах приложения, это будет хорошим местом для хранения, так какlibпредназначен для общих библиотек и компонентов.src/routes/<route-name>/: Если данные связаны только с конкретным маршрутом, вы можете хранить их прямо в каталоге маршрута.
Хранить файлы в static каталоге не рекомендуется, так как он предназначен в основном для статических ресурсов, таких как robots.txt и другие файлы, которые должны иметь фиксированный путь.
Вопрос 2: Как загружать файлы данных?
Для загрузки файлов данных с использованием функции load в SvelteKit можно использовать следующий подход. В нашем случае рассмотрим CSV файл.
Шаги для загрузки данных:
-
Создайте или поместите ваш CSV файл в
src/lib/data/data_1000.csv. -
Имплементация функции
loadв+page.js:
import fs from 'fs';
import path from 'path';
/** @type {import('./$types').PageLoad} */
export async function load() {
const filePath = path.resolve('src/lib/data/data_1000.csv'); // Получаем полный путь к файлу
const fileContents = fs.readFileSync(filePath, 'utf8'); // Читаем содержимое файла как строку
// Здесь вы можете обработать CSV данные, например, парсить их в массив объектов
const dataArray = fileContents.split('\n').map(line => line.split(',')); // Простой парсинг
return {
data: dataArray, // Возвращаем данные в качестве `data`
};
}- Использование загруженных данных в
+page.svelte:
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<table>
<thead>
<tr>
{#each data[0] as header}
<th>{header}</th>
{/each}
</tr>
</thead>
<tbody>
{#each data.slice(1) as row}
<tr>
{#each row as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</tbody>
</table>Дополнительная информация
При работе с другими форматами данных, такими как JSON или Parquet, аналогичный подход можно использовать для чтения файлов. Однако для форматов, не являющихся текстовыми (например, Parquet), вам может потребоваться установить дополнительные библиотеки (например, parquetjs), чтобы корректно парсить данные.
Таким образом, следуя описанным этапам, вы сможете загружать данные в статическую версию вашего SvelteKit приложения, что обеспечит необходимую функциональность и возможность последующей обработки данных для отображения в таблицах или других компонентах интерфейса.