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

執筆者:

関連記事

Reactに関するメモ

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

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました   目次1. <reference>によるグローバルモジュールによる方法2.import/exportによる外 ...

lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。 記載した実行環境は以下の通りです。Node.jsのインストー ...

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...

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

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