JavaScript Single-Page-App - 我如何“分发”json？

Question

我目前正在使用 Aurelia-Framework 并希望将一个大的 json 文件加载到我的应用程序中。

问题是，我不知道如何让 json 文件出现在我的 Chrome 浏览器的“dist”文件夹中，以便脚本能够找到它。

简而言之，我想这样做：

var request = new XMLHttpRequest();
var jsonString = request.open("GET", "file://../core/data/5e-SRD-Monsters.json", false);

...是的，路径是正确的，但文件夹“data”及其内容不会出现在 Chrome 的调试源中。

我必须以某种方式通过 gulp 包含 json 吗？

Answer 1

您的主要问题是“如何让 json 文件出现在 'dist' 文件夹中”。正如 cmets 中也提到的，这是一个简单包含的问题。

对于 skeleton jspm 项目，请执行以下操作：

1. 打开~/build/export.js文件
2. 在第一个“列表”部分中包含包含 .json 文件的文件或文件夹

这看起来像：

    module.exports = {
      'list': [
        'index.html',
        'config.js',
        'favicon.ico',
        'LICENSE',
        "jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js", 
        'jspm_packages/system.js',
        'jspm_packages/system-polyfills.js',
        'jspm_packages/system-csp-production.js',
        'styles/styles.css',
        'core/data/5e-SRD-Monsters.json'
      ],

这里是an an example 放在哪里。

重要提示：考虑到您说的是“dist”文件夹，我假设您将骨架与 jspm 一起使用。当您构建使用 CLI、骨架 webpack 或入门工具包构建的 Aurelia 应用程序时，该过程完全不同。

现在您已经在 dist 文件夹中获得了 .json 文件。但是使用 XMLHttpRequest 加载 file:// 并不是完全推荐的方法。正如 cmets 中提到的，理想情况下，您应该将其加载为 http 请求，而不是文件请求。

让我们将其纳入建议。您需要做的就是将 aurelia-fetch-client 添加到您的库中，然后您可以简单地执行以下操作：

import { HttpClient } from 'aurelia-fetch-client';

export class App {

  get_stuff() {
    let http = new HttpClient();

    // assuming the file is in /dist/core/data/,
    // simply read it through a promise + through a relative path:
    http.fetch('./core/data/5e-SRD-Monsters.json')
        .then(data => console.log(data));
  }

}

现在这使用 http 而不是 file://，这将消除可能发生的任何权限问题，例如无法直接访问文件系统。