JavaScript 单页应用程序 - 如何"distribute" json？

Question

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

问题是，我不知道如何将json文件显示在Chrome浏览器的"dist"文件夹中，以便脚本能够找到它。

简而言之，我想这样做：

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

是的，路径是正确的，但文件夹"数据"及其内容不会出现在Chrome的调试源中。

我是否必须以某种方式通过gull包含json？

Answer 1

您的主要问题是"如何将json文件显示在'dist'文件夹中"。正如评论中所提到的，这只是一个简单的包含问题。

对于骨架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'
],

这里有一个放在哪里的例子

重要信息：考虑到您谈论的是"dist"文件夹，我假设您将骨架与jspm一起使用。当您构建一个使用CLI、骨架webpack或入门套件构建的Aurelia应用程序时，过程完全不同。

现在dist文件夹中有.json文件。但是，使用XMLHttpRequest来加载文件：//并不完全是推荐的方法。正如评论中所提到的，理想情况下，您应该将其加载为http请求，而不是文件请求。

让我们考虑一下这个建议。您所需要做的就是将aurelia fetch客户端添加到您的库中，然后您可以简单地执行以下操作：

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://，这将消除可能出现的任何权限问题，例如无法直接访问文件系统。