私のAureliaアプリケーション内のパッケージをインポートする方法

Question

Aureliaを使用して正常に実行されているアプリですが、VurecodeとAureliaが提供するスケルトンを使用して開発しました。 CLIが利用できるようになったので、私はアプリケーションをVS2015/Asp.net Coreプロジェクトに移植しようとしていますが、いくつかの問題があります。

VSCodeプロジェクトには、ビルドフォルダ内にGulpがコンパイルするために使用するbundles.jsファイルがあります（理解しているところから）。そのファイルにはdist/aureliaというセクションがあり、それは私がインポートする必要があるすべての追加パッケージを置く場所で、cssとjsファイルをインポートします。このように見える：私はVS2015以内に新しいプロジェクトを作成するコマンドau new --hereを使用する場合

"dist/aurelia": { 
     "includes": [ 
     "aurelia-framework", 
     "aurelia-bootstrapper", 
     "aurelia-fetch-client", 
     "aurelia-router", 
     "aurelia-animator-css", 
     "aurelia-templating-binding", 
     "aurelia-polyfills", 
     "aurelia-templating-resources", 
     "aurelia-templating-router", 
     "aurelia-loader-default", 
     "aurelia-history-browser", 
     "aurelia-logging-console", 
     "bootstrap", 
     "bootstrap/css/bootstrap.css!text", 
     "fetch", 
     "jquery", 
     "rstacruz/nprogress", 
     "moment", 
     "systemjs/plugin-text/*.js", 
     "components/jqueryui", 
     "quilljs", 
     "rich-text", 
     "util", 
     "signalr" 
     ], 
     "options": { 
     "inject": true, 
     "minify": true, 
     "depCache": false, 
     "rev": false 
     } 
    } 

しかし、生成されたプロジェクトは少し異なって見えます。私はaurelia_projectフォルダを持っていて、その中にビルド/コンパイルのすべてが起こる場所のように見えます。そのフォルダには、aurelia.jsonファイルがあり、それは私が言われたすべてのパッケージ（私はNPM btwを使用しています）を置く必要がある場所です。これらのパッケージをインポートしようとすると、ファイルパスに.jsが自動的に追加され、CSSが完全になくなるため、ページが読み込まれたときにCSSが読み込まれなくなります。ここでaurelia.jsonは次のようになります。

"dependencies": [ 
      "aurelia-binding", 
      "aurelia-bootstrapper", 
      "aurelia-dependency-injection", 
      "aurelia-event-aggregator", 
      "aurelia-framework", 
      "aurelia-history", 
      "aurelia-history-browser", 
      "aurelia-loader", 
      "aurelia-loader-default", 
      "aurelia-logging", 
      "aurelia-logging-console", 
      "aurelia-metadata", 
      "aurelia-pal", 
      "aurelia-pal-browser", 
      "aurelia-path", 
      "aurelia-polyfills", 
      "aurelia-route-recognizer", 
      "aurelia-router", 
      "aurelia-task-queue", 
      "aurelia-templating", 
      "aurelia-templating-binding", 
      { 
      "name": "text", 
      "path": "../wwwroot\\scripts/text" 
      }, 
      { 
      "name": "aurelia-templating-resources", 
      "path": "../node_modules/aurelia-templating-resources/dist/amd", 
      "main": "aurelia-templating-resources" 
      }, 
      { 
      "name": "aurelia-templating-router", 
      "path": "../node_modules/aurelia-templating-router/dist/amd", 
      "main": "aurelia-templating-router" 
      }, 
      { 
      "name": "aurelia-testing", 
      "path": "../node_modules/aurelia-testing/dist/amd", 
      "main": "aurelia-testing", 
      "env": "dev" 
      }, 
      { 
      "name": "jquery", 
      "path": "../node_modules/jquery/dist/jquery.min" 
      }, 
      { 
      "name": "bootstrap", 
      "path": "../node_modules/bootstrap/dist/js/", 
      "main": "bootstrap" 
      } 
     ] 
     } 

だから、私は私のVSCodeプロジェクトだ、私は必要とタグを介してhtmlページにブートストラップCSSを輸入しました。まだそれは正しいことですか？もしそうなら、私はこのインポートの問題をどのように修正するのですか？

EDIT

以下の答えは少しさらに得ることが役立ちました。今はプロジェクトがビルドされ、エラーなしで実行されますが、私は正しくインポートされたブートストラップのCSSを得ることができません。ここで

は私の新しいaurelia.jsonファイルの抜粋です：

{ 
      "name": "aurelia-testing", 
      "path": "../node_modules/aurelia-testing/dist/amd", 
      "main": "aurelia-testing", 
      "env": "dev" 
      }, 
      "jquery", 
      { 
      "name": "bootstrap", 
      "path": "../node_modules/bootstrap/dist/js", 
      "main": "bootstrap", 
      "resources": [ 
       "../css/*.css" 
      ] 
      } 

だから、これはブートストラップパッケージにCSSファイルを追加しています。さて、私のタイスクリプトファイルでは、私はimport 'jquery'とimport 'bootstrap'を呼び出しています。私はまだCSSを取得していません。これを修正する方法がわかりません。

Answer 1

aurelia skeleton-esnextはSystemJSを使用し、Aurelia-CLIはRequireJSを使用します（SystemJSとWebPackは近い将来CLIでサポートされます）。 SystemJSとRequireJSはモジュールローダーであり、少し違った動作をします。そのため、モジュールを構成する方法は2通りあります。

このリンクはcssファイルを持っているのlibを設定する方法を示します。 http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/9

"dependencies": [ 
    ... 
    { 
    "name": "nprogress", 
    "path": "../node_modules/nprogress", 
    "main": "nprogress", 
    "resources": [ 
     "nprogress.css" 
    ] 
    } 
    ... 
] 

上記のコードは、バンドルされたファイルにnprogress.cssを入れてRequireJSに指示します。ただし、cssファイルをインポート/要求する場所や時期はわからないため、アプリでインポート/必須にする必要があります。あなたのビューで<require from="nprogress/nprogress.css"></require>を使用するか、ビューモデルでimport 'nprogress/nprogress.css';を使用してください。

SystemJSを使用していたときに、CSSMがいくつかの依存関係を検出し、SystemSSにCSSファイルをロードするように指示する特別な構文を生成できるため、いくつかのCSSファイルをインポートする必要はありませんでした。たとえば、あなたがJSPMを使用してnprogressをインストールするとき、それは次のファイルを生成します。

/* */ 
"format global"; 
"deps ./nprogress.css!"; 
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress 
* @license MIT */ 

;(function(root, factory) { 
///.... 

をライン「./nprogress.cssをDEPS！「;。したがって、あなたはあなたのビューまたはビュー・モデルでのCSSファイルを要求/インポートする必要はありませんSystemJSが自動的にモジュールをロードするとき/ nprogress.cssを必要とインポートするよう指示

・ホープ、このことができます

Answer 2

を！ロブ・アイゼンバーグでcontact-manager tutorialをチェック

それはaurelia.jsonするjqueryの、ブートストラップを追加する方法を示しています。

"dependencies": [ 
... 
"jquery", 
{ 
"name": "bootstrap", 
"path": "../node_modules/bootstrap/dist", 
"main": "js/bootstrap.min", 
"deps": ["jquery"], 
"exports": "$", 
"resources": [ 
    "css/bootstrap.css" 
] 
}, 
... 
] 

をそして、どのようapp.htmlでそれを必要とする：

<require from="bootstrap/css/bootstrap.css"></require> 

私は正常D3のために同じことを行うことができました：

{ 
"name": "d3", 
"path": "../node_modules/d3/build", 
"main": "d3.js" 
}, 

その後、私は私のコンポーネント.jsファイルに

import * as d3 from d3 

を、それを使用することができました[編集]ジャスト気づいチュートリアルリンクは上記の受け入れられた答えに含まれていましたが、jquery/bootstrapを追加するための実際のコードを示しています。これには編集後も含めOPの例に欠落している要素がいくつかあります。