Как мы загружаем файл WebVtt в React?

Question

Это моя структура данных

WEBVTT

00: 00: 15.000 -> 00:00:17.951 Слева мы видим...

00: 00: 18.166 -> 00:00:20.083 Справа мы видим...

00: 00: 20.119 -> 00:00:21.962 ... ловцы головы

Я пытаюсь разобрать веб-файл vtt. Для этого я написал:

     var data = require('./captions.en.vtt');

ошибка

client:47 ./src/captions.en.vtt Сбой при разборе модуля: C:\Users\sampr\Desktop\MyVIew\WebVtt\src\captions.en.vtt Неверный номер (3:0) Вам может потребоваться соответствующий загрузчик для обрабатывать этот тип файла.

Может ли кто-нибудь помочь мне?

Answer 1

Вам нужен соответствующий загрузчик для типа файла (.vtt).

Установить загрузчик файлов (npm install --save-dev file-loader) и вы можете использовать его прямо так:

var data = require('file-loader!./captions.en.vtt');

Answer 2

Используя Next.js, я остановился на этом решении .

... добавьте файл с именем staticdata.js в папку pages/api. Это создаст бессерверную функцию, которая загрузит данные json из файла и вернет их в качестве ответа.

В основном решение состоит в том, чтобы вернуть данные из конечной точки API.