How to load an external config file in a Webpack-React application without bundling it?

后端未结

关注

 2  1195

I have a web application that is written with React and bundled with Webpack. The application has a JSON config file that I want to include at runtime and not to be bundled

相关标签:

2条回答

梦毁少年i

2020-12-19 01:29
I ended up using a modified version of that to load my script externally. My application doesn't require the config immediately so the async aspect doesn't make a difference here.

I placed this at the top of my <head> in applications entry page with a co-located config file.
```
<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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2020-12-19 01:43

If your config is not so confidential, you could do this in your index.html

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

And in your react application get your config with

const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;

0 讨论(0)