本文首發簡書 http://www.jianshu.com/p/b12ccfdfb0c1, 歡迎轉載，但請註明轉載鏈接，謝謝！

藍圖

從接觸ng2開始就有個想法，要把學到的東西快速實踐，做個有逼格項目。直到看到破狼博客中提到的 rebirth，一個基於ng2的前端項目，就開始躁動了，想搗鼓成一個完整的項目，作爲自己的在線博客系統。

對於只有移動端經驗的我，要在短時間內熟練使用前端的技術框架以及工具鏈，還是有不少東西需要學習，幸好有強大的社區羣體。

目標

一個博客系統涉及的技術棧太多，那就先來個小目標好了。使用Webpack打包完成一個簡單的angular2 Demo，讓它成爲一個ng2-seed項目, 後續可以在它基礎上做新的功能開發。也爲後續替換英雄指南中的SystemJS爲Webpack做準備。
常用配置文件的說明： package.json, tsconfig.json, typings.json, webpack.config.js
webpack如何配置 (下篇文章)
webpack-dev-server如何啓動 (下篇文章)
完整代碼 -> 傳送門

環境

需要說明，本教程僅是Windows的實操，Linux，Mac環境，會有不同。
- Windows 10 64位
- gitBash version 2.9.0.windows.1
- NodeJs version 6.8.0
- npm version 3.10.8
- IntelliJ IDEA 15

效果展示

其中的各種json配置文件，ts文件，dist, node_modules， index.html後續會有說明。
上圖展示的是典型的ng2項目結構，開發依賴庫node_moudles, 源碼src， index入口，ts入口，編譯混淆後的dist等。

實操

讀者最好先仔細閱讀 ng2 快速起步文章，對照上述內容，完成自己的First App, 對其中出現的關鍵詞，有個印象。便於我們接下來的理解。

step 1 ：創建並配置項目

使用gitBash 進入工作目錄

mkdir ng2-starter-webpack
cd ng2-starter-webpack

接下來需要創建package.json等配置文件。先看下這些配置文件中文官網的說明。

package.json 用來標記出本項目所需的 npm 依賴包。

tsconfig.json 定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼。

typings.json 爲那些 TypeScript 編譯器無法識別的庫提供了別的定義文件。

package.json

該package.json 有多種方式：最簡單方法，直接從其他地方copy過來修改。
這裏介紹 npm init方式，熟悉git 同學都知道，git init的含義，同樣的 npm init就是初始化package.json內容，並且會創建該json文件。按照提示一步步回車，就完成了。

添加ng2相關依賴庫

注意，本文並不是按照 快速起步 樣式來寫。當我實操快速起步過程中，僅僅是按照文檔來做，至於爲什麼，不清楚，但當我看【破狼】rebirth時候，發現對ng2的相關配置不熟悉，無法更好的工作。回頭再來按照自己的理解梳理一遍。

先把package.json中的一些內容刪除，暫時沒有使用：

"main": "index.js",
"scripts": {  "test": "echo \"Error: no test specified\" && exit 1"},

添加 ng2相關依賴庫，可以使用 npm來安裝：

1. npm install xxxpackage --save-dev 
2. npm install xxxpackage --save 
3. npm install xxxpackage -g

其中, --save-dev, 會在package.json 中 devDependencies出現, --save 會在 dependencies字段中出現。 -g 是將依賴包安裝在全局，也就是你安裝npm所在的系統目錄中。

當然，我這裏偷懶，直接copy 快速起步中的ng2配置。

"dependencies": { 
  "@angular/common": "~2.0.1", 
  "@angular/compiler": "~2.0.1",  
 "@angular/core": "~2.0.1", 
 "@angular/forms": "~2.0.1",  
 "@angular/http": "~2.0.1",  
 "@angular/platform-browser": "~2.0.1", 
 "@angular/platform-browser-dynamic": "~2.0.1",  
 "@angular/router": "~3.0.1",  
 "@angular/upgrade": "~2.0.1",  
 "angular-in-memory-web-api": "~0.1.1",  
 "bootstrap": "^3.3.7", 
 "core-js": "^2.4.1", 
 "reflect-metadata": "^0.1.8",  
 "rxjs": "5.0.0-beta.12", 
 "zone.js": "^0.6.25"
}

使用 npm install安裝ng2依賴庫。注意網絡的暢通，建議將npm安裝源修改爲國內淘寶的，方法百度。

添加TypeScript庫

ng2首選使用ts開發，npm安裝ts，提示大家使用全局和局部安裝方法，好處是全局使用。

npm install typescript -g
npm install -g typescript@2.0.6
npm install typescript --save-dev

其中的 @x.x.x就是告訴npm，你需要哪個版本的ts。

1.  $(npm bin)/tsc -v
2.  tsc -v

step 2 創建應用和組件

mkdir src
cd src
mkdir app

分別按照快速起步中步驟2，步驟3添加內容。其中有具體的描述作用。

@app.module.ts

import { NgModule } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent],
    bootstrap:      [AppComponent]
})
export class AppModule{}

@app.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>My App</h1>'
})

export class AppComponent{}

step 3 啓動應用

在app同級目錄創建文件@main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from  './app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

至於爲什麼要添加這個啓動main.ts, 中文官方文檔說明如下：

爲什麼要分別創建 main.ts 、應用模塊和應用組件的文件呢？
應用的引導過程與創建模塊或者展現視圖是相互獨立的關注點。如果該組件不會試圖運行整個應用，那麼測試它就會更容易。

引導過程與平臺有關的
但我們應該用正確的方式組織 Angular 應用的文件結構。啓動 App 與展現視圖是兩個相互分離的關注點。把這些關注點混在一起會增加不必要的難度。可以通過使用不同的引導器 (bootstraper) 來在不同的環境中啓動 AppComponent
。測試組件也變得更容易，因爲不需要再運行整個程序才能跑測試。讓我們多花一點精力來用 “正確的方式” 實現它。

step 4 宿主頁面index.html

注意，這裏跟快速起步中的【步驟 5 ：定義該應用的宿主頁面】有區別，不要參考那裏面的內容，因爲有 systemjs.config.js, 它不是我們的主角。現階段，只需要點簡單的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular 2 starter webpack</title>
</head>
<body>

<my-app>Loading...</my-app>

</body>
</html>

現在運行，瀏覽器沒有 My App 效果，僅僅是 Loading… 字樣！

step 5 TSC編譯運行ng2

這裏已經跟快速起步不一樣了，原因是，我們需要稍微深入一點TS編譯命令，有助於理解package.json中 script： 各種命令。

添加tsconfig.json

爲了更好的設置tsc編譯所需的參數，添加tsconfig.json文件。

{
  "compilerOptions":{
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

其中的參數說明，請參考：編譯選項

在實際開發中，需要將src 以及編譯生成的東西分開，目標目錄可以是 dist。在gitBash終端中項目根目錄執行如下命令：
tsc --rootDir src --outDir dist 或者 $(npm bin)/tsc --rootDir src --outDir dist
忽略執行中的錯誤信息，查看 根目錄 下多了 dist 文件以及其中的內容。

typings.json

剛纔編譯tsc中，會發現有一些 error出現，如：

node_modules/@angular/platform-browser/src/facade/collection.d.ts(10,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(11,25): error TS2304: Cannot find name 'Map'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.

其中類似 Promise, Map 是已經加入到了ES6的 specification中，但是typescript還不認識這些 Promise對象的原因是我們在 tsconfig.json中使用的 es5, 那就直接修改爲 es6看看，結果是沒有錯誤了，但是，不能使用 es6, 因爲兼容性的問題。

解決該問題，還需要其他的手段了。注意，在前面，已經引入了 core-js等庫，這個庫就包含了es6中的Object，比如Promise等，所以，我們只需要通過某種方式告知ts編譯器我們提供了這些庫的Object。
這裏就要使用了typings工具了， npm 安裝

npm install --save-dev typings

$(npm bin)/typings -v
$(npm bin)/typings search core-js
$(npm bin)/typings install --global --save dt~core-js

完成上述幾個步驟，就可以看到 根目錄多了文件夾 typings , typings.json 。
他們的作用就是爲了解決上述提到 tsc 編譯 ng2出現了error。

再次執行 $(npm bin)/tsc --rootDir src --outDir dist 就沒有任何問題了！

小結

寫到這裏 tsc編譯ng2以及會出現的問題都解決了，但是 My App 還是沒法顯示，這個在下篇中說明。

Angular2開發基礎之TSC編譯

藍圖

目標

環境

效果展示

實操

step 1 ：創建並配置項目

package.json

添加ng2相關依賴庫

添加TypeScript庫

step 2 創建應用和組件

step 3 啓動應用

step 4 宿主頁面index.html

step 5 TSC編譯運行ng2

添加tsconfig.json

typings.json

小結

如何優雅升級ng2項目

AndroidStudio提示磁盤空間不足

ng2英雄指南相關問題

Angular2開發基礎之TSC編譯

Google ZXing系列講解(一)——導入AS

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Angular2開發基礎之TSC編譯

藍圖

目標

環境

效果展示

實操

step 1 ： 創建並配置項目

package.json

添加ng2相關依賴庫

添加TypeScript庫

step 2 創建應用和組件

step 3 啓動應用

step 4 宿主頁面index.html

step 5 TSC編譯運行ng2

添加tsconfig.json

typings.json

小結

step 1 ：創建並配置項目