JavaScript Одностраничное приложение - как мне «раздавать» json?

Question

В настоящее время я использую Aurelia-Framework и хочу загрузить большой файл json в мое приложение.

Проблема в том, что я не могу понять, как получить json-файл в папке «dist» моего браузера Chrome, чтобы скрипт смог его найти.

Короче говоря, я хочу сделать это:

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

... и да, правильный путь, но папка «данные» и его содержание не будет отображаться в источниках отладки Chrome.

Должен ли я включить json через gulp?

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' 
     ], 

Здесь an an example о том, где его поставить.

Важно: Учитывая, что вы говорите о папке «DIST» я предполагаю использовать скелет с JSPM. Процесс совершенно другой, когда вы создаете приложение Aurelia, построенное с помощью CLI, скелетного webpack или, возможно, стартового набора.

Теперь у вас есть файл .json в папке dist. Но использование XMLHttpRequest для загрузки файла: // не является точно рекомендуемым подходом. Как уже упоминалось в комментариях, в идеале вы должны загружать его как HTTP-запрос, а не запрос файла.

Давайте рассмотрим это. Все, что вам нужно сделать, это добавить Aurelia-выборки-клиент в библиотеку, а затем вы можете просто сделать что-то вроде этого:

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, а не файл: //, который позволит устранить любые которые могут возникнуть, например, отсутствие доступа к файловой системе напрямую.