JavaScriptシングルページアプリケーション - jsonを "どのように"配布しますか？

Question

私は現在Aurelia-Frameworkを使用しており、大きなjsonファイルをアプリケーションにロードしたいと考えています。

問題は、私のChromeブラウザの「dist」フォルダにjsonファイルを表示して、スクリプトがそれを見つけることができるようにすることです。要するに

は、私はこれをしたい：

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

...はい、パスが正しいですが、フォルダ「データ」とその内容は、Chromeのデバッグソースには表示されません。

何とかgulp経由で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' 
     ], 

ここにはan an exampleが入ります。

重要：あなたは私はあなたがJSPMとスケルトンを使用と仮定しています「distの」フォルダの話をしている考えます。このプロセスは、CLI、スケルトンWebpack、またはおそらくスターターキットで構築されたAureliaアプリケーションを構築するときとは全く異なります。

これで、distフォルダに.jsonファイルがあります。しかし、XMLHttpRequestを使用してfile：//をロードすることは、推奨されるアプローチではありません。コメントでも述べたように、理想的にはファイルリクエストではなくhttpリクエストとしてロードするのが理想的です。

これを参考にしましょう。いずれかを排除するであろう、//：

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ではなくファイルを使用しています。あなたがする必要があるすべてはあなたのライブラリにオーレリア・フェッチ・クライアントを追加し、あなたは、単にこのような何かを行うことができますですファイルシステムへの直接のアクセス不足など、発生する可能性のあるアクセス権の問題。