之前用過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 2
import '@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、為什麼有這些依賴或不理解的地方請閱讀官方文件。