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

執筆者:

関連記事

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...

Reactに関するメモ

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

JavascriptのEventオブジェクトについて

1.function(e) {} の引数eの意味合い 引数eはイベントオブジェクトです。イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる。 JavaScriptの関 ...

当サイトの環境環境

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

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...