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フロントエンド開発

執筆者:

関連記事

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

TypeScriptのモジュールについて

モジュールについてまとめました。 (内部モジュール) 共通の関数などをグローバル空間に記載したくない場合などに使用する。   (外部モジュール) 別ファイルとして外部にある機能を利用する仕組 ...

Node.jsのrequire関数のモジュール読み込みについて

Node.js のモジュール機構について(JavaScript の場合) ディレクトリ構造 Node.js のパッケージマネージャーである npm を使う場合、プロジェクト ディレクトリは以下のような ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

Cordovaのメモ書き

  devicereadyイベント   Cordovaのアプリが実行される時、Cordovaが提供しているネイティブ機能をHTML5側からすぐに呼び出せることが出来ない。 Cordovaフレ ...