angular.js - Cara menggunakan Angular2 dengan webpack
迷茫
迷茫 2017-05-15 17:12:22
0
4
710

Saya telah menggunakan Angular1 sebelum ini dan walaupun proses pembelajaran agak melengkung, saya rasa ia agak lancar langkah demi langkah, dan ia digunakan terutamanya dalam beberapa projek peribadi Kemudian, saya mencuba Vue dan merasakan ianya lebih mesra pengguna dan cekap, jadi saya menggunakannya untuk beberapa projek kecil Projek ini telah dibina menggunakan vue.

Pada masa ini, Ng2 telah mengeluarkan versi rasmi Memandangkan komuniti, sumber dan dokumentasi Ng, saya tidak boleh tidak mahu mencubanya, saya mula tertanya-tanya sama ada saya menggunakannya dengan cara yang salah . Saya sering menghadapi masalah berikut:

1 isu integrasi dengan Webpack

Saya menghabiskan sepanjang pagi (hari soalan) mengikut langkah demi langkah dokumen, dan akhirnya menyalin terus semua kandungan fail yang terlibat dalam dokumen itu, tetapi Google masih tidak dapat menyelesaikan pelbagai ralat sepenuhnya. Pendek kata, saya menemui versi Typescript lagi, versi webpack. Pada akhirnya, saya tidak mempunyai pilihan selain mencari sesuatu seperti webpack-starter, menjalankannya, dan kemudian mula menyemak konfigurasi saya mendapati bahawa webpack dalam starter adalah versi 2.x sebab utama. Tidak ada repo dalam laman web rasmi yang boleh diklon. ? ?

Sebab mengapa saya berharap untuk membina persekitaran langkah demi langkah ialah apabila saya tersentuh dengan perkara baru, saya harus tahu apa yang saya lakukan, daripada mempunyai rancangan yang besar dan komprehensif, jika tidak, saya tidak akan tahu di mana masalah itu disebabkan (TypeScript, Systemjs, Ng2 agak baru kepada saya).

Selain itu, sebab mengapa webpack digunakan adalah kerana aliran kerja berdasarkan webpack sudah sangat biasa, dan pengurus modul Systemjs tidak menemui sebarang kelebihan yang jelas pada masa ini, kerana berdasarkan keadaan sedia ada, saya fikir pembungkusan, pemampatan , pencincangan Penamaan dan seumpamanya masih diperlukan Adakah ia benar-benar bijak untuk menggunakan Systemjs untuk membuat permintaan tanpa fikiran?

2 Kebergantungan

Apabila saya mula menggunakan NG2, saya mendapati bahawa saya perlu sentiasa menyalin dan menampal beberapa perpustakaan, seperti polyfills zone rxjs, dan lain-lain, dan saya keliru Ini adalah perpustakaan yang diperlukan untuk Ng2 dijalankan tidakkah anda menetapkan tanggungan itu sendiri? Adakah anda mahu pengguna menambahnya satu per satu secara manual? Terdapat juga polyfills, saya fikir mereka hanya menyokong IE, dan saya fikir saya hanya akan menumpukan pada Chrome dan tidak menambahnya, tetapi ia tersekat untuk masa yang lama Ternyata Chrome juga memerlukan perkara ini, dan saya benar-benar tidak tidak mahu mengeluh.

3 saiz bingkai

Selepas hampir tidak dijalankan, bungkus fail dalam mod pengeluaran, pada asasnya tiga apl vendor polyfill:
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';

Selepas ketiga-tiga fail itu dimampatkan dan dikelirukan, jumlahnya adalah kira-kira 1.2J memang haha

4 Organisasi Komponen

Secara tradisinya, satu komponen sepadan dengan fail ts html kurang (walaupun fail html boleh ditulis dalam ts dalam berbilang baris, tetapi ia adalah anti-manusia untuk templat dengan lebih banyak kandungan), yang nampaknya sangat besar , adakah a fail serupa dengan .vue yang boleh mengurus komponen secara berpusat?

Ringkasnya, proses menggunakan Ng2 sangat mengecewakan (integrasi dengan bahagian webpack), jadi saya ingin bertanya apakah kelebihan Ng2 pada masa ini?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

membalas semua(4)
伊谢尔伦

Kelebihan: Mempunyai bapa yang baik.

習慣沉默

Gunakan templat ini, anda masih memerlukan sedikit masa untuk melakukannya sendiri https://github.com/AngularCla...

左手右手慢动作

Hello, bagaimana anda menyelesaikan masalah anda?

漂亮男人

Beberapa perkara:
1. Angular2 termasuk semua rangka kerja teras adalah kurang daripada 100kb selepas ugify + gzip, vue+vuex+router+resource+... Set lengkap alatan sekurang-kurangnya lebih daripada 50kb+ selepas ugify + gzip.
2. Jika anda ingin penyelesaian mudah untuk membuat projek ng2, anda boleh menggunakan alat angular-cli
3 Jika anda tidak tahu cara mengkonfigurasinya, anda boleh merujuk kepada pelbagai templat templat angular2 yang saya konfigurasikan
https:// github.com/ntesmail/a...
4 Sila baca dokumentasi rasmi mengapa terdapat kebergantungan ini atau jika anda tidak faham.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan