Angular2 WEB WEBフロントエンド開発

SystemJSのConfig構成について

投稿日:2017年5月15日 更新日:

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsystemjs.config.jsファイルを例にして、その役割を調べてみたいと思います。『SystemJSを使ったWEBフロントエンド開発』を合わせてみて頂けば分かりやすいと思います。

まずはAngular2の公式チュートリアルにあるクイックスタートで使用されているsystemjs.config.jsを確認してみます。

 

paths

paths定義はmap定義と類似してエイリアスを示す役目になります。map定義のモジュール場所の定義で、「npm:」が「node_modules/」パスをして置き換わります。

map

モジュールの場所を設定します。左の「app」はindex.htmのSystem.importで定義するアプリケーションモジュールの名称を示し、右の「app」は「appフォルダ」設定しています。同時にライブラリモジュールとして、angular関連, rxjs, angular-in-memory-web-apiが定義されています。 これらはbaseURLと合わせて実体ファイルまでのパスを正確に指定する必要があります。TypeScriptファイルのソース中のimport文で、from句以降のエイリアスを定義されます。

packages

モジュールのロード属性を(例:ファイル名、拡張子、依存関係等)を定義します。

main属性でトップモジュールファイルを定義しない場合はmain.jsがデフォルトになります。defaultExtension: 'js'と指定している場合は、フォルダにtsファイルとjsファイル が両方存在する場合、指定と一致するjsファイルを参照する。

 

 

スポンサーリンク

スポンサーリンク

-Angular2, WEB, WEBフロントエンド開発

執筆者:

関連記事

Angular2の開発環境を構築(angular-cli)

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。 当サイトはangular-cliでAngular2を開発します。angular-cl ...

no image

Angular2とWebpackを使ったWEBフロントエンド開発

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました       1. <reference>によるグローバルモジュールによる方法 (1)ソース ...

Angular2のデータバインディングについて

当セクションではAngular2のデータバインディングについて確認してみたいと思います。データバインディングとは、コンポーネント(ロジック部)とテンプレート(WEBコンテンツ/HTML部)との間でデー ...