将 JSON 加载到 React/Node/Express 通用应用程序中，但不捆绑它

Question

我对使用 React/Node/Express 还很陌生，我选择了 kyt 作为样板，因为在寻找要工作的基本文件集时，它似乎是一个不错的选择。我正在使用默认的 React starter kyt。

我的工作是从 CMS 中取出一堆 JSON，并将其转换为 React 站点。

为此，我需要能够使用此 JSON 文件中的数据填充“路由”。我使用了下面发布的代码，效果很好。不过这里的问题是，我对 JSON 的“导入”意味着数据被编译到我的包中（通过 webpack）——这很好，直到 CMS 更新 JSON 文件，此时 bundle.js 不会更新，使其过时（除非我编写了一些代码来在每次 CMS 更新时重新编译捆绑包，我不喜欢这样的声音）。

我需要的是代码在运行时加载 JSON 文件，而不是在编译时加载。

谁能给我指个方向，好吗？我尝试了很多东西，包括 AJAX/axios 请求——但似乎没有任何效果。我读到 Webpack 的“System.import”功能可以帮助我，我已经尝试过了——但这也将我的数据捆绑到编译的 bundle.js 中。

import React from 'react';
import Route from 'react-router/lib/Route';
import IndexRoute from 'react-router/lib/IndexRoute';

import App from '../components/App.js';
import Home from '../components/Home.js';
import Standard from '../components/Standard.js';
import Listing from '../components/Listing.js';
import FourOhFour from '../components/FourOhFour.js';

// THIS IS THE PROBLEM - I don't want this to be bundled
import Model from '../app-json/model.json';

const componentRegistry = {
    "Home": Home,
    "Standard": Standard,
    "Listing": Listing,
    "FourOhFour": FourOhFour
}


function buildDynamicRoutes(config){
    var routeJSX = [];
        Object.keys(Model.posts).map((key) => {
            var thisComponent = '';
            if(Model.posts[key].template === 'page-listings.php'){
                thisComponent = 'Listing';
            } else if(Model.posts[key].template === ''){
                thisComponent = 'Standard';
            }
            routeJSX.push(
                <Route path={Model.posts[key].route} components={componentRegistry[thisComponent]} key={key} />
            );
        });
        return routeJSX; 
}

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        { buildDynamicRoutes() }
        <Route path="*" component={FourOhFour}/>
    </Route>
);

export default routes;

Answer 1

更新：

做同样的事情，但服务器端同样简单。您可以选择像我在下面所说的那样远程托管它，并使用像 request 这样的库，甚至是内置的 Node http 库来获取远程文件内容。

或者，当您转储 CMS 文件时，您可以将其放在服务器上进行渲染并使用 Node 的 fs 库从磁盘读取文件，而不是将文件放在某个随机的远程文件存储中。

在这两种情况下，您都必须解析 JSON 数据并将其输入到您的组件中。

---

由于您使用的是前端代码，因此您有两种选择：

1. 在 Webpack 编译 React 代码时加载 JSON。这就是现在正在发生的事情。

2. 在浏览器上执行 React 代码时加载 JSON。这可以通过将 JSON 导出托管在一些静态文件存储（如 S3，但有许多替代方案）上并在组件挂载时使用 AJAX 加载和解析 JSON 文件来完成。

这是另一个解释如何执行此操作的答案。

https://stackoverflow.com/a/14388512/4697675

您可能希望将 JSON 文件加载到组件的状态中，然后使用它进行渲染。这样，在 AJAX 调用完成之前，您可以在没有数据的情况下进行渲染。