Пакет JSON в виде простого файла JSON с Webpack

javascript json webpack

2668 просмотра

2 ответа

У меня есть веб-приложение, которое требует файл конфигурации JSON, который содержит конечные точки и другие необходимые параметры запуска.

Если я использую json-загрузчик, файл не «настоящий json», он будет выглядеть примерно так:

module.exports = {
    "name": "foo",
    "key": true,
};

То, что я хотел бы, - это простой старый JSON, который означает, что он может быть проанализирован и изменен как часть процесса развертывания перед отправкой на веб-сервер, откуда он будет обслуживаться.

Альтернатива - использовать загрузчик файлов. Однако это означает, что (хотя это тривиальная задача), я должен написать код, чтобы загрузить файл самостоятельно. Я хотел бы, чтобы Webpack справился с этим и был доступен.

Есть ли способ, которым я могу requireфайл JSON, который написан как обычный старый файл JSON и импортирован во время выполнения?

Автор: Ray Booysen Источник Размещён: 08.11.2019 11:20

Ответы (2)


2 плюса

Решение

Есть ли способ, которым я могу requireфайл JSON, который написан как обычный старый файл JSON и импортирован во время выполнения?

Webpack действует во время компиляции. Это означает, что когда вам требуется файл, он загружает этот файл, выполняет изменения, указанные в цепочке загрузчиков, и экспортирует окончательный результат из этой цепочки. То, что вы просите, звучит как загрузчик, который действует как загрузчик файлов, но экспортирует IIFE, которое возвращает обещание для требуемого файла.

Теоретически возможно иметь загрузчик веб-пакетов, скажем, асинхронный загрузчик файлов, который получает входные данные от загрузчика файлов, будет обрабатывать запрос асинхронности для вас. Давайте предположим что-то вроде:

const promisedFile = require('async-file-loader!file-loader!./myJson.json');
promisedFile.then(file => { console.log(JSON.parse(file)); });

Но тогда вся логика обработки запроса будет ограничена этим вызовом. Async-file-loader будет выглядеть примерно так:

module.exports = function(source) {
    return `module.exports = eval("(function(url){
      /* define async request func, preform request and return promise in here */
   })(${url})")`;
}

Довольно противный ...

Когда вы захотите загрузить свой json-файл во время выполнения, я увижу 2 варианта:

  1. используйте загрузчик файлов и самостоятельно запросите файл json.
  2. используйте серверный язык сценариев и введите конфигурацию в файл .html. Если вы используете nodejs и выражаете, например, на своей бэкэнд-стороне, вы могли бы легко внедрить конфигурацию, используя Cheerio, перед обработкой запроса.
Автор: ShabbY Размещён: 08.06.2017 12:47

1 плюс

Как сказал ShabbY выше, Webpack - это пакет модулей, который собирает ваши файлы заранее.

Похоже, вам нужно добавить файл конфигурации (json) после сборки, чтобы получить доступ во время выполнения. Для этого решением было бы загрузить файл с помощью обычного вызова ajax, а не пытаться связать его с Webpack.

Автор: JusMalcolm Размещён: 08.06.2017 06:07
Вопросы из категории :
32x32