は、アウレリアのアプリケーションでブートストラップとjqueryが必要です

Question

私はAureliaを初めて使うので、これがどのように機能するのかよくわかりません。私は新しいAureliaプロジェクトを作成し、単にjspm install bootstrapを実行してbootstrapをインストールしました。私はコンソールでこれもjquery 3.0.0に引っ張ってきたのを見た。

私の質問では、bootstrap.cssとbootstrap.jsとjquery.jsはどうやって使用しますか？

初の試み：app.htmlで

私は、次のthheを実行しようとしました：

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

私は私config.jsに以下の行を持っているので、ことを試みた：

map: { 
    ... 
    "bootstrap": "github:twbs/bootstrap@3.3.6", 
    ... 
} 

この種のそれがbootstrap.jsをロードするという意味では機能しますが、ブラウザにエラーが表示されて、それが見つからない場合jquery.js。だから私のために自動的にjQueryをロードしているわけではありません。 これは正常ですか？

第二の試み：

私はapp.htmlにこれに私のrequireを変更：

<require from="jquery/dist/jquery.js"></require> 
<require from="bootstrap/css/bootstrap.css"></require> 
<require from="bootstrap/js/bootstrap.js"></require> 

彼らはあるので、私は、それがどこbootstrap.jsとbootstrap.cssファイルを検索する場所を知っているかどうかはわかりませんjspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.cssなどにありますが、ブートストラップファイルの検索方法はわかります。しかし、ではなく、 jqueryファイル。

私はjqueryのための私のconfig.jsでこれを持っている：

map: { 
    ... 
    "github:twbs/bootstrap@3.3.6": { 
     "jquery": "npm:jquery@3.0.0" 
    }, 
    .... 
} 

したがって、基本的に私の質問は、どのようにすべきであるこの仕事を？ <require from="bootstrap">の場合、requireはすべての必要なファイルを自動ロードする必要があります。それとも、個別のファイルとしてロードする必要がありますか？もしそうなら、この場合jqueryをロードするにはどうしたらいいですか？

Answer 1

require要素は、Aureliaコンポーネント、htmlテンプレート（Aureliaコンポーネント）、またはcssファイルをプルするための要素です。 javascriptファイルをロードするためのものではありません。

アウレリアの骨格はそのmain.jsファイルにブートストラップをロードする方法を示しています。

import 'bootstrap'; 

は、ファイルの最初の行です。これはブートストラップのjavascriptコードを初期化します。ファイルにしてjQueryのインポート

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

は同様に非常に単純です：

import $ from 'jquery'; 

は、その後、あなたはしかし$機能を使用することができます

はapp.htmlでrequire要素は、ブートストラップのCSSをロードするために使用されますあなたは好きです。

Answer 2

私はこの問題は、その後アウレリアサイト上のチュートリアルページから、最新のノードとNPMをインストールし、していた： - ブートストラップ設定を取得するには

、我々はNPMとライブラリ自体をインストールすることによって開始します。これを行うには、コマンドラインで次のコマンドを実行します。

npm install bootstrap --save 

次に、ブートストラップはjQueryのを使用しているため、我々は同様にjQueryをインストールする、次のように：パッケージがあったよう

npm install jquery@^2.2.4 --save 

その後、アプリを再起動します更新して再度実行しました...固定！

Answer 3

追加後 インポート 'bootstrap'; main.js内の を削除するには、アプリを停止して（Ctrl + c）、 au run -watch を実行して再度動作させる必要があります。