javascript - 浏览器如何加载库中的文件？

Question

我构建了一个 Node 库，它加载位于库内部的 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 文件。浏览器如何处理文件路径？服务器是否将整个库发送到浏览器并且浏览器将它们存储在某种临时存储中？

Answer 1

所以，有几件事。首先，如果 JSON 在应用程序的生命周期内是静态的(即无需重新启动)，那么在服务器端您实际上可以做比现在更简单的事情。如果每次应用程序启动时只加载一次，您可以这样做:

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

我个人实际上会根据我的其他需求来完成此操作，而不是调用加载函数，但只是想将其保留在函数中，以防万一您有充分的理由这样做。

在客户端，您将执行三件事之一。一，您可以将数据文件夹设置为公共(public)，然后通过客户端的 ajax 请求调用它:

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

第二，您可以利用 myLib 函数在快速 route 自行处理它:

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

第三，您可以使用像 webpack 这样的构建工具来导入数据文件，例如json 加载器:

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