問題描述

之前用過Angular1學的過程雖然覺得有點曲線，但是感覺還算一步一步比較順利，而且主要是在一些個人項目中使用，后來嘗試了Vue感覺上手、效率都比較有優勢，所以一些小項目已經用vue做了。

目前Ng2已經發布正式版，考慮到Ng的社區、資源、文檔，不禁希望嘗試一番，試過之后開始懷疑是不是哪里用的方式不對，主要遇到下面幾個問題：

1 和Webpack集成問題

一上午時間（提問日）按照文檔一步一步走，最后甚至直接拷貝文檔涉及到的所有文件內容，依然跑不起來，各種錯誤，google也無法完全解決，總之又遇到Typescript版本的，webpack版本的。最后無奈只得找了一個webpack-starter之類的，跑起來，然后開始查配置，發現starter里面webpack是2.x版本，不知道這個是不是主要原因，官網的例子沒有一個repo可以clone就算了，還尼瑪跑不起來，真的？？？

之所以希望一步一步搭建環境是覺得接觸一個新事物的時候，應該知道自己在做什么，而不是拿一個大而全的方案，否則出了問題都不知道哪里導致（TypeScript、Systemjs、Ng2對我來說都算是比較新的）。

另外，之所以要用webpack是因為基于webpack的工作流已經非常熟悉了，而Systemjs這個模塊管理器目前來說沒發現明顯優勢，因為基于現有的條件，我覺得打包、壓縮、hash命名之類還是很有必要的，用Systemjs無腦請求真的大丈夫？

2 依賴

剛開始用NG2的時候，發現要不斷地復制粘貼幾個庫，什么polyfills zone rxjs等，我就納悶了，這些都特么是Ng2運行時必須的庫，為毛不自己設置依賴？要用戶手工一個一個加？還有那個polyfills，我以為只是支持IE的，心想咱只管Chrome就沒加，結果卡了好久，原來Chrome也需要這個玩意兒，真是不想吐槽了。

3 框架大小

勉強跑起來后，通過生產模式打包文件，基本就三個polyfills vendor app:polyfills.ts:

import ’core-js/client/shim’;import ’reflect-metadata’;require(’zone.js/dist/zone’);import ’ts-helpers’;if (process.env.ENV === ’build’) { // Production} else { Error[’stackTraceLimit’] = Infinity; require(’zone.js/dist/long-stack-trace-zone’);}

vendor.ts:

// Angular 2import ’@angular/platform-browser’;import ’@angular/platform-browser-dynamic’;import ’@angular/core’;import ’@angular/common’;import ’@angular/http’;import ’@angular/router’;import ’rxjs’;import ’@angularclass/hmr’;

三個文件壓縮、混淆后加起來1.2M左右，真是呵呵噠,在這一點上面跟Vue完全沒有可比性

4 組件組織

傳統情況，一個組件對應一個ts html less文件，（盡管可以把html文件通過多行的方式寫在ts內，但是對于內容較多的模板就是反人類了），看起來實在是頭大，有沒有類似 .vue那樣的文件可以集中管理組件？

總之用Ng2的過程真是感覺被虐到了（跟webpack集成那部分），所以我想問問Ng2目前來說到底還有什么優勢？

問題解答

優勢：有個好爹。

用這個模板吧，自己折騰還是得要點時間 https://github.com/AngularCla...

你好 你的問題事怎么解決的？

說幾點：1、angular2包含全部核心框架在ugify + gzip后小于100kb，vue+vuex+router+resource+...全套工具在ugify + gzip至少超過50kb+。2、如果樓主想要一個簡單方案來創建ng2項目，可以選用angular-cli工具3、樓主不會配置的話，完全可以參考各種模板，這里有我配置的全套angular2模板https://github.com/ntesmail/a...4、為什么有這些依賴或者不理解的地方請閱讀官方文檔。