Webpack & React - Изменить данные файла JSON без необходимости перестраивать

Question

Я пытаюсь создать приложение с некоторыми универсальными переменными, хранящимися в JSON, которые я могу изменить без необходимости перестраивать.

Итак, я создал очень простую структуру

src/index.js

import data from '../assets/variables.json'
console.log('test');
console.log(data);

assets/variables.json

{"price":20}

Я продолжаю и создаю dist/main.js файл, который включаю в плагин WordPress. Пока все хорошо.

Например, если я хочу изменить цену на {"price": 30}, мне нужно перестроить пакет webpack. Я хочу альтернативу, которая не требует локальной перестройки.

Мне не удалось понять внешние аспекты WebPack. Могу ли я включить данные оттуда? Могу ли я как-то получить их на ComponentDidMount? Мне нужен API для этого или только URL файла?

Есть ли лучший вариант? Короче говоря, я хочу, чтобы нетехнический пользователь мог обновлять основные данные.

Спасибо за любые идеи.

Answer 1

Вы можете использовать fetch API для извлечения данных из файла JSON без importing этого.Используйте следующий метод:

const fetchData = async filePath => {
    try{
        const res = await fetch(filePath);
        return await res.json();
    }catch(err){
        return err;
    }
}

Имейте в виду, что, поскольку вы извлекаете данные только на componentDidMount и не перестраиваете каждый раз при изменении содержимого файла json, вы не увидите обновленные значения,Сделайте кнопку fetch данные JSON.Таким образом, пользователь может нажать кнопку после изменения файла JSON.