Question

我构建了一个节点库，用于加载位于lib内部的JSON文件，并使用从JSON加载的内容执行某些操作。

所以lib结构是

lib/mylib.js
data/data.json
index.js

在mylib.js中执行此操作;

var PATH = path.join(
  __dirname,
  '../data/data.json'
);

function load() {
   return JSON.parse(
       fs.readFileSync(
         PATH,
         'utf8'
       )
     );
   }

module.exports = { load: load};

它在服务器端完美运行。我可以调用load函数，它显示json文件的内容。我的问题是它在浏览器中是如何工作的。我在我的测试服务器上快速测试了它也运行良好。它在浏览器上打印了json文件的内容（使用了chrome和safari）。

我在client.js

中有这段代码

import mymodule from 'mylib/lib/mylib';

function MyObject({myobj, styles}) {
  return (
    <Flex center>
      <Spacing push={ {direction: 'ends', size: 'huge'} }>
        <h1>{mymodule.load()}</h1>
      </Spacing>
    </Flex>
  );

这会在浏览器上打印json内容。我不是100％肯定这是如何工作的。当浏览器调用mymodule.load()时，它会在相对路径../data/data.json中查找JSON文件。浏览器如何处理文件路径？服务器是否将整个lib发送到浏览器并将浏览器存储在某种临时存储中？

Answer 1

所以，有几件事情。首先，在服务器端，如果JSON在应用程序的生命周期内是静态的（即没有重新启动），那么您实际上可以比您更简单地执行操作。如果每个应用程序启动只会加载一次，您可以这样做：

// in lib/mylib.js
function load() {
  return require('../data/data.json');
}

我实际上是根据我的其他要求，而不是调用加载函数，但只是想把它留在函数中，以防你有充分的理由这样做。

在客户端，你将做三件事之一。一，您可以将数据文件夹设置为public，然后使用来自客户端的ajax请求调用它：

app.use(express.static('./data'));

二，您可以在快速路线中自行处理它，利用myLib功能：

app.get('/data', function(req, res) { return res.send(myLib.load()); });

三，您可以使用像webpack这样的构建工具来导入数据文件，例如json-loader：

https://github.com/webpack-contrib/json-loader

浏览器如何在库中加载文件？

1 个答案: