Как загрузить внешний файл конфигурации в приложение Webpack-React, не связывая его?

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

В моей точке входа для приложения я импортирую содержимое с помощью json-loader, но это заставляет файл быть встроенным в приложение, и я не могу обновить файл конфигурации после его объединения.

Как я могу настроить мой файл webpack.config.js, чтобы исключить мой файл config.json, но все же разрешить мне импортировать его в свое приложение? Это не модуль, поэтому я не знаю, можно ли его включить в раздел externals моего webpack.config.js

Я пробовал использовать require.ensure, но все, что я вижу сейчас, - это содержимое config.json, связанное с файлом 1.1.bundle.js, и изменение файла конфигурации ничего не дает.

app.js

let config;
require.ensure(['./config.json'], require => {
    config = require('./config.json');
});

webpack reactjs externals
person Ilvenis    schedule 08.07.2016    source источник
comment
Вы можете получить файл json через http с помощью fetch () или узла http. Приложение работает на сервере узла и в браузере? Или просто в браузере?   -  person Ben Sidelinger    schedule 12.10.2016

Ответы (2)


arrow_upward
2
arrow_downward

Если ваша конфигурация не настолько конфиденциальна, вы можете сделать это в своем index.html.

<script>
  var initialState = {
    config: {
      idleTime: 120,
      fetchStatusInterval: 8,
      dataPath: 'somepath.json',
    },
  };
  window.__INITIAL_STATE__ = initialState;
</script>
<script src="static/bundle.js"></script>

И в вашем приложении реакции получите свою конфигурацию с помощью

const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;
person Doppio    schedule 16.10.2016

arrow_upward
1
arrow_downward

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

Я поместил его вверху страницы входа <head> в приложениях с совместно расположенным файлом конфигурации.

<head>
    ... other scripts
    <script>
        var config= window.config|| {};
        $.getJSON('config.json', function(response) {
            config= response;
        });
    </script>
</head>
<body>
    <div id='root'/>
    <script src='dist/app.bundle.js'></script>
</body>
person Ilvenis    schedule 19.10.2016
comment
Где вы проверяете, что конфиг доступен в dist/app.bundle.js? - person Omnicon; 13.03.2018