node_modulesフォルダからスクリプトをインポートする方法

Question

チュートリアルの後にAngular 2.0で動作するASP5アプリケーションを取得しようとしています。私はいくつかのステップを経て、インターネット接続なしで作業しようとすると動作しないことに気付きました（私は通常、電車に座っている間に作業しています）。もちろん、チュートリアルによって提案された輸入がインターネットに接続せずに動作しません。

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.js"></script> 
<script src="node_modules/rxjs/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

ファイルが存在します。したがって

<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script> 

、私はこのようなフォルダに私node_modulesからローカルファイルをインクルードしてみました正しいです。しかし、私はプロジェクトをデバッグしようとすると、私はすべての4つのファイルの次のエラーを取得します：SyntaxError: missing ; before statementと私はブラウザを介してファイルを見て、私が受け取るすべてはHello World!と書かれたファイルです。私は明らかに何かが欠落しているように見えますが、これまでにnpm全体で作業したことがないので、なぜこのようなことが起こるのかわかりません。

アクセス制限はありますか？ JSモジュールがありませんか？誰も私のhtmlのnode_modulesフォルダのファイルをどのように含めることができるのか説明できますか？あなたが入力したときにAsp.Net 5/wwwrootには

Answer 1

ので、Webアプリケーションのデフォルトのルートディレクトリです：

node_modules/angular2 /バンドル/ angular2-polyfills.js

は、実際には次で検索パス：

wwwrootに/ node_modules/angular2 /バンドル/ angular2-polyfills.js

ファイルが

すなわち、プロジェクトのルートに存在するが

node_modules/angular2/bundles/angular2-polyfills.js

しかし、Webアプリケーションのルートにないので、これらのスクリプトでは404エラーが表示されます。

解決策は、これらのファイルをwwwrootフォルダにコピーすることです。

私は自動的にwwwrootにするためにファイルをコピーするためにゴクゴクタスクを書き込み/スクリプト/ libフォルダ

を示唆していると、あなたは、このようにそれらを使用することができます：あなたのHTMLページに続いて

//Sample Gulp file code 
var paths = { 
    npmSrc: "./node_modules/", 
    libTarget: "./wwwroot/lib/" 
}; 

var libsToMove = [ 
    paths.npmSrc + '/es6-shim/es6-shim.min.js', 
    paths.npmSrc + '/angular2/es6/dev/src/testing/shims_for_IE.js', 
    paths.npmSrc + '/angular2/bundles/angular2-polyfills.min.js', 
    paths.npmSrc + '/systemjs/dist/system.js', 
    paths.npmSrc + '/rxjs/bundles/rx.min.js', 
    paths.npmSrc + '/angular2/bundles/angular2.dev.js', 
    paths.npmSrc + '/angular2/bundles/router.js', 
    paths.npmSrc + '/angular2/bundles/http.min.js', 
]; 

かあなたは、このようにこれらを使用することができますビュー：場合

<script src="~/lib/es6-shim.min.js"></script> 
<script src="~/lib/shims_for_IE.js"></script> 
<script src="~/lib/angular2-polyfills.min.js"></script> 
<script src="/lib/system.js"></script> 
<script src="~/lib/rx.min.js"></script> 
<script src="/lib/angular2.dev.js"></script> 
<script src="/lib/router.js"></script> 
<script src="/lib/http.min.js"></script> 

あなたは、あなたのプロジェクトのルートにゴクゴクファイルが表示されるはずのありませんプロジェクトのルートに "gulpfile.js"という名前のファイルを作成してください。

私はこれが役に立ちそうです:)