剛開始從github上clone這個項目到本地，拖到vscode中，第一個反應(yīng)就是這該從哪里開始看、項目怎么運行、為什么只有一個index.html，而且還打不開，怎么部署到服務(wù)器上去運行，心里陰影面積得有多大。。。
我也是帶著這樣的心情一步步摸索過來的，當(dāng)熟悉了這一套以后，會有一種柳暗花明的感覺，那種感覺就是很爽，有時間的伙伴可以多花點時間自己去摸索相信會有非常大的收獲。
下面我們來一一解決上面的困惑，揭開這套框架神秘的面紗。
學(xué)習(xí)webpack和npm管理工具，對入手這套框架很有幫助，能讓你了解它的來龍去脈。
這套ng2的框架集成的功能還是非常多的，光看目錄下的文件也能看出來，包括tslint\karma\docker等，這部分我們前期可以不去管它，如果你不想用，也不會影響開發(fā)。
對于任何一個前端項目（特別是github上的項目），我們打開項目首先關(guān)注的應(yīng)該是package.json文件，這個文件里除了最重要的dependencies之外，我們最應(yīng)該關(guān)注的就是scripts內(nèi)容，它告訴我們運行腳本（大多數(shù)是webpack的指令），關(guān)于npm相關(guān)的知識點貼出來
npm package.json中的dependencies和devDependencies的區(qū)別
首先執(zhí)行npm install指令加載依賴，可以使用淘寶鏡像cnpm快速下載
然后執(zhí)行npm run start執(zhí)行運行script中的start指令，其指向指令npm run server:dev，這指令又指向了webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/，語法學(xué)習(xí)webpack知識
然后就靜靜地等待項目啟動運行，看到vaild的字眼就說明啟動成功了，瀏覽器輸入localhost:3000就能看到項目內(nèi)容了。這個地址也是可配置的。
其實就是在本地起了一個webpack-dev-server的服務(wù)器，可以自動刷新頁面，方便開發(fā)。
為什么只有一個index.html呢，這是因為webpack的模塊化，index.html的作用就是為項目提供一個入門，也就是為打包后輸出的三個文件polyfills.js、vendor.js、main.js提供一個載體，對webpack來說，js是最主要的，html和css都可以借助js完成頁面渲染，webpack也可以實現(xiàn)多入口。一般情況下我們做單頁面應(yīng)用開發(fā)，一個入口足矣。
看來webpack對于理解這套框架非常有幫助。不過開發(fā)過程中，如果你不需要改配置，那么你記住那幾個script下的指令就夠你應(yīng)付了，畢竟時間有限，一下子學(xué)那么多東西也是挺難受的。
那么最后一個問題，怎么部署呢，其實問題比想象中的要簡單許多，有后端開發(fā)經(jīng)驗的人會好很多，我們執(zhí)行npm run build指令，打包項目輸出到dist目錄下，在服務(wù)器上起一個nginx服務(wù)，把dist目錄下的文件放到nginx下就可以實現(xiàn)部署了，就是這么簡單，我們本地運行也是起了一個服務(wù)器，既然本地都可以通過服務(wù)訪問，所以服務(wù)器上也是一樣的道理。
我們公司是使用了jeakins來自動化構(gòu)建，利用jeakins從gitlab拉取代碼后執(zhí)行build的操作，再將代碼復(fù)制到相應(yīng)的服務(wù)下就能訪問了。
這套框架最重要的還是angular2的語法，它才是我們的主心骨，其余知識點也是為了輔助我們開發(fā)用的。項目運行起來后，再慢慢把個個知識點不斷挖掘吃透，這是一種快捷有效的應(yīng)用方式。
關(guān)于調(diào)試
當(dāng)我們開啟sourcemap，就能看到源碼在webpack目錄下，localhost下的編譯過的代碼
