Angular2 雛形 ver.0.0.1

はじめに

デフォルトでは TypeScriptファイルとJavaScript、Mapファイルが同じフォルダに作成され
見にくいため別フォルダに分けられるように quickstart のソースを元に変更する箇所をメモします。

手順1

• 公式サイトを参考に quickstart のソースを取得する。参考サイト

# GitHubよりソースの取得
git clone https://github.com/angular/quickstart.git sample01

# フォルダへ移動
cd sample01

# 不要なファイル・フォルダを削除（残したいなら実行しなくてもよい）
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

手順2

• package.json の修正 -- npm-run-all、cpx パッケージの追加

package.json

  },
  "devDependencies": {

    // デフォルトのまま

    "npm-run-all": "^4.0.1",  // 追加
    "cpx": "^1.5.0"           // 追加
  },

手順3

• package.json 内の実行スクリプトの追加・修正

package.json

  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm-run-all clean copy build",                                                          // 変更
    "start": "concurrently \"npm run copy:watch\" \"npm run build:watch\" \"npm run serve\"",            // 変更
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "copy": "cpx \"./src/**/{*.html,*.css,*.js,*.jpeg,*.gif,*.json}\" ./dist",                          // 追加
    "copy:watch": "cpx \"./src/**/{*.html,*.css,*.js,*.jpeg,*.gif,*.json}\" ./dist --watch",            // 追加
    "clean": "rimraf ./dist"                                                                            // 追加
  },

手順4

• bs-config.json の修正 -- コンパイル結果ファイル（jsファイル、Mapファイル）の出力先の指定

bs-config.json

{
  "server": {
    "baseDir": "dist",   // src を dist に変更
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

手順5

• tsconfig.json ファイルの修正 -- コンパイル出力結果出力先の指定を追加

.src/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "../dist"                         // 追加
  }
}

手順6

• パッケージをインストールし、実行

npm install
npm start

手順7

• dist フォルダに js、mapファイルが存在し正常に動作することを確認する。

最後に

正常に動作すれば src 配下のファイルを修正しすれば、dist 配下に修正後ファイル、もしくは
コンパイル結果のファイルが出力されるようになります。

参考

ver.0.0.1 ソース

Angular2 ひな型 ver.0.0.2

以上