SystemJSを使用してnode_modulesから直接インポートできないのはなぜですか？

Question

SystemJSにはquestionsとdocumentationがたくさんありますが、私はまだインポート構文を理解していません。具体的には、なぜこのコードを使用ng-boostrap.jsが見つからない活字でき ：

import { createPlatform } from '../../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap', 

直接ファイルをインポートされますが、このコードは動作します：私はsystemjs.config.jsでmapは行が含まれてい

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js'; 

：

を

'@angular/core': 'npm:@angular/core/bundles/core.umd.js'. 

systemJSを使用してnode_modulesから直接インポートできないのはなぜですか？

Answer 1

注：下記の解決策は機能しますが、情報の一部が間違っています。コメントの下の議論を見てください。

まず、TypeScriptはJSファイルについて何も知らない。彼らはそれらをどのように作り出すのかは知っていますが、それらをコンパイルする方法はわかりません。だからあなたは実際にどのようにして得たか分からない

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js'; 

あなたのTypeScriptコードでコンパイルする。

活字体が既にnode_modulesで見ているので、私たちは、活字体で

import {createPlatform } from '@angular/core'; 

を行うことができます。 @angular/coreの場合、node_moduleの内部には@angular/coreというディレクトリがあり、index.d.tsというファイルがあります。これは私たちのTypeScriptコードがJSファイルではなくコンパイルするファイルです。 JSファイル（上記の最初のコードスニペットのもの）は、実行時にのみ使用されます。 TypeScriptはそのファイルについて何も知らないはずです。上述した第2のスニペット、活字体はJSにコンパイルされたとき、それはランタイムとして

var createPlatform = require('@angular/core').createPlatform; 

のように見えるの使い方

、SystemJSはのにこれを見る、そしてmapの構成を見て、絶対ファイルへ@angular/coreをマップそのファイルをロードすることができます。

'@angular/core': 'npm:@angular/core/bundles/core.umd.js' 

これは、ng-bootstrapに従うパターンです。それはあなたがnode_modules/@ng-bootstrap/ng-bootstrapディレクトリに見れば、あなたはindex.d.tsファイルが表示されるはずです

import { ... } from '@ng-bootstrap/ng-bootstrap'; 

をコンパイルすることができるように、活字体定義ファイルを指すのインポートを使用してください。これは、TypeScriptがコンパイルに使用するものです。それはJSにコンパイルされたとき、それは

var something = require('@ng-bootstrap/ng-bootstrap').something; 

そしてSystemJSの設定で、次のコンパイルされ、私たちは、そうでない場合SystemJSがそれを解決する方法を知ることができません、モジュールファイルの絶対パスに@ng-bootstrap/ng-bootstrapをマップする必要があります。

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js' 

これからの重要なことの1つは、コンパイル時と実行時の違いを理解することです。コンパイルタイプはTypeScriptです。これはランタイムファイルなので、JSファイルについては何も知りません。 SystemJSは、ランタイム（JS）ファイルについて知っておく必要があるものです。