JavaScript：Anglar勉強整理メモ - 各設定ファイルの役割と概要 -

最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。

Angularアプリケーションプログラミング

今回は、Angularで使われる設定ファイルの役割と概要についてです。

基本ライブラリの挙動を宣言する

設定ファイル

設定が必要となるファイル

設定ファイル	概要
pakage.json	Angular及びnode.jsで使用するライブラリを管理
tsconfig.json	TypeScriptのコンパイラの動作を定義
systemjs.config.js	モジュールローダー(SystemJS)の設定情報

pakage.json

Node.jsの設定ファイル、現在のアプリ及び使用しているライブラリを管理する。
npm install実行時に当該ファイルに記載されているライブラリをインストールする。

# ライブラリを追加でインストールする
npm install module_name --save

# save:dependenciesパラメーターへに記録
# 参考:勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)
# https://qiita.com/msakamoto_sf/items/a1ae46979a42d6948ebd

tsconfig.json

TypeScriptをコンパイルする際の挙動を管理する。

{
  "compilerOptions": {
    "target": "es5",                // 生成するJavaScriptのバージョン 
    "module": "commonjs",           // 生成するJavascriptのモジュール形式
    "moduleResolution": "node",     // モジュールの解決方法
    "sourceMap": true,              // ソースマップを生成するかどうか
    "emitDecoratorMetadata": true,  // デコレーターのためのメタデータを出力するかどうか
    "experimentalDecorators": true, // デコレーターを有効にするかどうか
    "lib": [ "es2015", "dom" ],     // コンパイル時にインクルードされるライブラリ
    "noImplicitAny": true,          // 暗黙的なAny型への変換を行うかどうか
    "suppressImplicitAnyIndexErrors": true // インデックスアクセス時のnolmplicitAnyエラーを抑制
  }
}

systemjs.config.js

SystemJSとは、JavaScriptのモジュールを動的にロードするためのライブラリ。
各ライブラリへのエイリアスやデフォルトでロードするファイル等を定義する。

(function (global) {
  System.config({
    paths: {
      // パスのエイリアス設定
      'npm:': 'node_modules/'
    },
    // モジュールの短縮名を定義
    map: {
      // our app is within the app folder
      'app': 'app',

      // Angler標準モジュール
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      /* 省略 */
    },
    // モジュールのロード方法s
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

以上