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

執筆者:

関連記事

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

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

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

Angular-cliにng2-bootstrapを導入する

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。 ...

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

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

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。 angular-cliでAngular2の開発環境を構築している事が前提と ...