angular.js - Angular2配合webpack的使用方式

Question

之前用过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目前来说到底还有什么优势？

Answer 1

利点: 良い父親がいること。

Answer 2

このテンプレートを使用してください。自分で行うにはまだ時間がかかります https://github.com/AngularCla...

Answer 3

こんにちは、問題はどのように解決しましたか?

Answer 4

いくつかのポイント:
1. すべてのコア フレームワークを含む Angular2 は、ugify + gzip、vue+vuex+router+resource+... の後では 100 kb 未満になります。ツールの完全なセットは、ugify + gzip の後では少なくとも 50 kb 以上です。
2. ng2 プロジェクトを作成するための簡単なソリューションが必要な場合は、angular-cli ツールを使用できます。
3. 設定方法がわからない場合は、さまざまなテンプレートを参照してください。私が構成した angular2 テンプレート
https://github.com/ntesmail/a...
4. これらの依存関係がある理由、または理解できない場合は、公式ドキュメントを読んでください。