最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2017/08/04
- メディア: 大型本
- この商品を含むブログを見る
今回は、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);
以上