調整 Angular 2 編譯自動產生的 .js .map 檔路徑

最近照 Angular 2 的 Tutorial 做了一個 Heroes Dashboard,通常建立好 TypeScript 的檔案之後,會自行編譯出相對應的 .map 以及 .js

這麼多檔案一同擠在 app 目錄下實在很崩潰,所以打算做個調整,把不是 TypeScript 的檔案都移到其他地方去,讓 app 保持在真正開發用的程式區域。


後來我才發現原來 systemjs.config.js 已經有提示我把 map 的 app 設定改為 dist 了。這個 dist 的資料夾表示輸出 .js .map 的資料夾路徑,你也可以換成你要的路徑。

1. 首先把 system.js.config.js 的 var map = { app: 'dist', ... 約略第八行的設定改為 'dist' (原為 app)
2. 在你的目錄下建立一個 dist 資料夾
3. 修改 tsconfig.json,在 compilerOptions 新增一個 outDir 的 key,值為 dist.  (你的輸出的資料夾目錄)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  }
}


處理完之後,記得重新 npm start.
這樣子 app 底下就會乾淨一點了... (另外 app 原本產生出來的 .map, .js 要自己刪掉哦! 也別不小心刪到 TypeScript (.ts) 的檔案...)

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源