Angular

systemjs.config.jsはAngular2パッケージ構造で何をしますか？



What Does Systemjs Config



解決：

TypeScriptコンパイラを使用してコンパイルされたモジュールをロードするようにSystemJSを構成できます。匿名モジュール（JSファイルごとに1つのモジュール）の場合、モジュールの名前を、モジュールのJavaScriptコードを実際に含むJSファイルにマップできます。

これがサンプルです。名前の付いたモジュールをインポートしようとするとアプリ/テスト、SystemJSは以下を行います：



  • 事前登録されたモジュールを見つけてみてください（System.register（ 'app / test'、..。
  • そうでない場合は、構成を調べて、対応するファイルをロードするために実行する要求を作成します。
    • ありますのマップエントリアプリ
    • ありますのパッケージエントリとアプリdefaultExtension =js
  • リクエストはhttp：// localhost：3000 / app /test.js。あなたが持っている場合map：{app：dist}、リクエストは次のようになりますhttp：// localhost：3000 / dist / test.js

systemjs.config.jsは、の構成を定義します パスの正規化 SystemJSで。次のようにSystemJSを使用して何かをロードします。

System.import（ 'app / main.js'）
これにより、SystemJSは、ファイルapp /main.jsから始めてアプリのロードを試みます。 NS SystemJSが最初に行うこと しかしすることです ノーマライズ パス（app / main.js）、つまりそれ 翻訳する systemjs.config.jsのルールに従ったパス。
 
 
 
Systemjs.config.jsは定義します 他の種類 SystemJSによってインポートされているものすべてのエイリアスの：
 
 
地図
 
マップセクションには2つの用途があります。
 
パスエイリアシング
 
SystemJSを使用してモジュールをロードしているアプリでは、マップセクションを使用してパスの一部をエイリアスします。 また 特定の名前付きモジュールが実際に配置されている場所をSystemJSに通知します。たとえば、次のようにSystemJSを使用してアプリを読み込んでいる可能性があります。
 
 
 
System.import（ 'app / main.js'）
ここで、実際にアプリファイルを次の場所に配置するとします。
 
/ assets / js / app。
これは、systemjs.config.jsの「map」セクションで定義できます。
 
// mapは、システムローダーに物を探す場所を指示しますmap：{'app'： '/ assets / js / app'}
SystemJSは、次の場所でメインファイルを検索します。
 
/assets/js/app/main.js
モジュールの場所を特定する
 
SystemJSの主な基本的な目的は、ブラウザーでのユニバーサルESモジュールサポートの欠如に対応するモジュールシステムを提供することです。これを行う方法の1つは、systemjs.config.jsの「map」セクションを使用して場所を特定することです。モジュールを探します。
 
標準のES'import 'ステートメントを使用してアプリ内にインポートされているモジュールの場合、マップセクションは、SystemJSがそれらを見つける場所を識別します（アプリがSystemJSを使用してロードされた後）。一般的な例は次のとおりです。
 
//マップはシステムローダーに物事のマップを探す場所を指示します：{//角度バンドル '@ angular / core'： 'npm：@ angular / core / bundles / core.umd.js'、 '@ angular / common'： 'npm：@ angular / common / bundles / common.umd.js'、 '@ angular /compiler'：'npm：@angular/compiler/bundles/compiler.umd.js'、
これは、ルートモジュールで最初にこれを行うときに次のことを意味します。
 
import {NgModule} from '@ angular / core';
... SystemJSは、デフォルトの場所でAngularコアライブラリを探すことでインポートを処理します（npmを使用してインストールされていると想定）。
 
/node_modules/@angular/core/bundles/core.umd.js
ここで、「npm：」が「/ node_modules」にどのように変換されるのか疑問に思われるかもしれません。これが、systemjs.config.jsの「paths」セクションの機能です。
 
 
パス
 
このセクションでは、「map」で定義されているモジュールパスの一部のエイリアスを定義します。上記の例で「npm」のエイリアスを作成する方法は次のとおりです。
 
パス：{//パスはエイリアスとして機能します 'npm：'： '/ node_modules /'}
これにより、「map」セクションに追加したパス内の「npm」の出現箇所が置き換えられ、文字列「/ node_modules /」に置き換えられます。
 
公式ドキュメント：https：//github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths（dead）
 
 
パッケージ
 
ドキュメントから：
  
 
パッケージは、共通パスに固有のメタおよびマップ構成を設定するための便利な機能を提供します。
 
 
たとえば、次のようにアプリをロードする場合：
 
System.import（ 'app'）
次に、「パッケージ」に次のセクションを追加できます。
 
//パッケージは、ファイル名や拡張パッケージがない場合のロード方法をシステムローダーに指示します：{app：{main： 'index.js' defaultExtension： 'js'、meta：{'./*。js'：{loader ： NS、 } } }
内訳は次のとおりです。
 
メイン： 'index.js'
パッケージまたはパスエイリアスのメインエントリポイント（「マップ」セクションでまだ提供されていない場合）
 
defaultExtension： 'js'
想定するファイル拡張子（まだ提供されていない場合）。この場合、ファイルタイプが指定されていない場合は、.jsファイルを探します。
 
メタ：{'./*。js'：{ローダー：false、} {
SystemJSがモジュールを正しくロードする方法を決定するために必要な情報。この場合、アプリ内の「.js」ファイルに対してモジュールローダーを呼び出さないでください（TypeScriptを使用している場合は、これが必要になります。TypeScriptをトランスパイルするときにSystemJSにモジュールをロードするだけで、次のことを行う必要があります。トランスパイルされた.jsファイルは無視してください）
 
（「メタ」の詳細については、ドキュメントを参照してください-https：//github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta（dead））
 
「パッケージ」セクションの完全な説明については、こちらの公式ドキュメントも参照してください。
 
https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages（dead）