問(wèn)題描述

之前用過(guò)Angular1學(xué)的過(guò)程雖然覺(jué)得有點(diǎn)曲線，但是感覺(jué)還算一步一步比較順利，而且主要是在一些個(gè)人項(xiàng)目中使用，后來(lái)嘗試了Vue感覺(jué)上手、效率都比較有優(yōu)勢(shì)，所以一些小項(xiàng)目已經(jīng)用vue做了。

目前Ng2已經(jīng)發(fā)布正式版，考慮到Ng的社區(qū)、資源、文檔，不禁希望嘗試一番，試過(guò)之后開(kāi)始懷疑是不是哪里用的方式不對(duì)，主要遇到下面幾個(gè)問(wèn)題：

1 和Webpack集成問(wèn)題

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

之所以希望一步一步搭建環(huán)境是覺(jué)得接觸一個(gè)新事物的時(shí)候，應(yīng)該知道自己在做什么，而不是拿一個(gè)大而全的方案，否則出了問(wèn)題都不知道哪里導(dǎo)致（TypeScript、Systemjs、Ng2對(duì)我來(lái)說(shuō)都算是比較新的）。

另外，之所以要用webpack是因?yàn)榛趙ebpack的工作流已經(jīng)非常熟悉了，而Systemjs這個(gè)模塊管理器目前來(lái)說(shuō)沒(méi)發(fā)現(xiàn)明顯優(yōu)勢(shì)，因?yàn)榛诂F(xiàn)有的條件，我覺(jué)得打包、壓縮、hash命名之類還是很有必要的，用Systemjs無(wú)腦請(qǐng)求真的大丈夫？

2 依賴

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

3 框架大小

勉強(qiáng)跑起來(lái)后，通過(guò)生產(chǎn)模式打包文件，基本就三個(gè)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’;

三個(gè)文件壓縮、混淆后加起來(lái)1.2M左右，真是呵呵噠,在這一點(diǎn)上面跟Vue完全沒(méi)有可比性

4 組件組織

傳統(tǒng)情況，一個(gè)組件對(duì)應(yīng)一個(gè)ts html less文件，（盡管可以把html文件通過(guò)多行的方式寫(xiě)在ts內(nèi)，但是對(duì)于內(nèi)容較多的模板就是反人類了），看起來(lái)實(shí)在是頭大，有沒(méi)有類似 .vue那樣的文件可以集中管理組件？

總之用Ng2的過(guò)程真是感覺(jué)被虐到了（跟webpack集成那部分），所以我想問(wèn)問(wèn)Ng2目前來(lái)說(shuō)到底還有什么優(yōu)勢(shì)？

問(wèn)題解答

優(yōu)勢(shì)：有個(gè)好爹。

用這個(gè)模板吧，自己折騰還是得要點(diǎn)時(shí)間 https://github.com/AngularCla...

你好 你的問(wèn)題事怎么解決的？

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