Любой способ использовать webpack для загрузки ресурса во время выполнения?

У меня есть один файл .json, содержащий элементы конфигурации, которые я хотел бы ссылаться из другого файла script, используя типичный синтаксис import/require. В настоящее время я использую webpack для решения этих зависимостей и связывания их для меня. Этот файл, однако, я хочу быть загруженным во время выполнения и надеялся, что может быть какой-то тип загрузчика, который мог бы разрешить и загрузить этот файл для меня во время выполнения. До сих пор я не нашел ничего, что точно соответствовало бы моим потребностям.

Пример:

var jQuery = require('jQuery');
var sol = require('some-other-lib');
var myConfig = require('/real/production/url/myconfig.json');

console.log(myConfig.myFavoriteSetting);

В приведенном выше примере я хотел бы, чтобы myconfig.json разрешался и загружался во время выполнения.

Возможно, связанные вопросы:

Ответ 1

Я думаю, что вы хотите require.ensure, разбиение кода веб-пакета. Модули, которые вы "обеспечиваете", помещаются в отдельный комплект, и когда ваш "обеспечить" выполняется во время выполнения, среда выполнения webpack автоматически извлекает пакет через ajax. Обратите внимание на синтаксис обратного вызова для обеспечения - ваш обратный вызов запускается, когда пакет завершил загрузку. В этой точке вам все равно необходимо запросить нужные модули;. просто убедитесь, что они доступны.

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

Ответ 2

С помощью Webpack 2 вы можете использовать System.import. Он использует API обещаний. AFAIK, в настоящее время не существует способа запуска кода async/await в браузере. Я считаю, что Babel может перевести async/ждут до ES2015, так что только последняя версия Node (v6.x) может запускать ее. Я не думаю, что браузеры способны это понять еще, потому что преобразованный код использует генераторы.

Для System.import обратите внимание, что некоторые старые браузеры (IE 11 и ниже, я верю) потребуют от polyfill API Promise. Проверьте polyfill.io для этого.

Если вы действительно хотите использовать async/await в браузере, вы можете сделать полный polyfill для ES2015.

Ответ 3

У меня был тот же случай с файлом (config.json).

Я решил скопировать его с помощью Copy-Webpack-Plugin

new CopyWebpackPlugin([
    // Copy directory contents to {output}/
    { from: 'config.json' }
  ])

После этого мой файл находился в каталоге сборки вывода. Я использовал свойство "externals" для ссылки на мой файл в файле webpack.config:

  externals: {
    'config': "require('./config.json')"
  }

В моем js файле, который загружает config.json:

import config from 'config'

'config' load require ('./config.json), который находится в каталоге вывода.

Я знаю, что это сложно, но я не нашел другого решения моей проблемы. Может быть, это поможет кому-то.

ИЗМЕНИТЬ

Мне пришлось использовать webpack для сборки, потому что import config from 'config' не понятен без него. Вот почему я заменяю:

externals: {
    './config.json': "require('./config.json')"
  }

var config = require('./config.json') //replace import config from 'config'

Без webpack Javascript понимает var config = require('./config.json'), потому что это правильный путь.

И когда я строю с помощью webpack, он меняет на require('./config.json'), когда видит "./config.json", поэтому он работает