Maison  >  Questions et réponses  >  le corps du texte

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

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

迷茫迷茫2736 Il y a quelques jours694

répondre à tous(4)je répondrai

  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:14:22

    Avantages : Avoir un bon père.

    répondre
    0
  • 習慣沉默

    習慣沉默2017-05-15 17:14:22

    Utilisez ce modèle, vous avez encore besoin d'un peu de temps pour le faire vous-même https://github.com/AngularCla...

    répondre
    0
  • ringa_lee

    ringa_lee2017-05-15 17:14:22

    Bonjour, comment avez-vous résolu votre problème ?

    répondre
    0
  • 漂亮男人

    漂亮男人2017-05-15 17:14:22

    Quelques points :
    1. Angular2, y compris tous les frameworks de base, fait moins de 100 Ko après ugify + gzip, vue+vuex+router+resource+... L'ensemble complet d'outils fait au moins plus de 50 Ko après ugify + gzip.
    2. Si vous souhaitez une solution simple pour créer un projet ng2, vous pouvez utiliser l'outil angulaire-cli
    3 Si vous ne savez pas comment le configurer, vous pouvez vous référer à différents modèles. Voici l'ensemble complet de. Modèles angulaire2 que j'ai configurés
    https:// github.com/ntesmail/a...
    4. Veuillez lire la documentation officielle pour savoir pourquoi il existe ces dépendances ou si vous ne comprenez pas.

    répondre
    0
  • Annulerrépondre