Untuk apa semua index.ts digunakan?


132

Saya telah melihat beberapa proyek benih dan semua komponen tampaknya memiliki index.ts yang mengekspor * dari komponen itu. Saya tidak dapat menemukan tempat untuk apa itu sebenarnya digunakan?

Misalnya https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Terima kasih


1
Relevan dengan diskusi ini adalah masalah ini pada github. Anda mungkin ingin membacanya sebelum menggunakan file barel dengan proyek Angular Anda
BeetleJuice

Jawaban:


227

Dari entri glosari yang diarsipkan oleh Angular.io v2 untuk Barrel* :

Satu barel adalah cara untuk meluncurkan ekspor dari beberapa modul menjadi modul kenyamanan tunggal. Laras itu sendiri adalah file modul yang mengekspor kembali ekspor dari modul lain yang dipilih.

Bayangkan tiga modul dalam folder pahlawan:

// heroes/hero.component.ts
export class HeroComponent {}

// heroes/hero.model.ts
export class Hero {}

// heroes/hero.service.ts
export class HeroService {}

Tanpa barel, konsumen akan membutuhkan tiga pernyataan impor:

import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero }          from '../heroes/hero.model.ts';
import { HeroService }   from '../heroes/hero.service.ts';

Kami dapat menambahkan barel ke folder pahlawan (disebut indeks berdasarkan konvensi) yang mengekspor semua item ini:

export * from './hero.model.ts';   // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing

Sekarang seorang konsumen dapat mengimpor apa yang dibutuhkannya dari tong.

import { Hero, HeroService } from '../heroes'; // index is implied

Paket bersudut sudut masing-masing memiliki barel bernama indeks.

Lihat juga PENGECUALIAN: Tidak dapat menyelesaikan semua parameter


* CATATAN: Barrel telah dihapus dari versi Glosari Angular yang lebih baru .

UPDATE Dengan versi terbaru Angular, file barrel harus diedit seperti di bawah ini,

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';

5
Ketika saya melakukan hal yang setara export * from './hero.model.ts', saya mendapatkan pesan seperti "'jalur impor tidak dapat diakhiri dengan' .ts ''" Jadi saya hanya mengubah ke export * from './hero.model'. Juga layak untuk mengulangi komentar Anda tentang Angular yang tidak merekomendasikan barel lagi
The Red Pea

1
@TheRedPea terima kasih atas petunjuknya. Saya tidak ingin mengubahnya karena ini adalah kutipan dari (versi sebelumnya dari) halaman tertaut
Günter Zöchbauer

Apakah Anda tahu ada perpustakaan atau perintah pembantu untuk menghasilkan index.js secara otomatis?
tom10271

1
@AlexanderAbakumov Karena komponen, arahan atau pipa harus milik satu dan hanya satu modul, maka dengan mendeklarasikan salah satu di atas dalam sebuah modul, ketika Anda mengimpor modul itu pada dasarnya Anda mencapai hal yang sama ... dengan asumsi Anda juga mengekspornya dari modul.
rism

2
@Qwerty Saya cukup yakin ini bekerja dengan pohon-gemetar, tetapi menggunakan barel telah dihapus dari praktik yang disarankan sejak lama, saya pikir ketika modul di mana diperkenalkan sebelum 1.0.
Günter Zöchbauer

29

index.tsserupa index.jsdi nodejs atau index.htmlhosting situs web.

Jadi ketika Anda mengatakan import {} from 'directory_name'itu akan mencari index.tsdi dalam direktori yang ditentukan dan mengimpor apa pun yang diekspor ke sana.

Misalnya jika Anda memiliki calculator/index.tssebagai

export function add() {...}
export function multiply() {...}

Anda dapat melakukan

import { add, multiply } from './calculator';

3
@FlowerScape Mengekspor melalui indeks sangat berguna saat membuat pustaka atau kode tingkat modul, sehingga pengguna akhir memiliki impor verbose yang lebih sedikit. Ini juga menyembunyikan detail implementasi yang tidak perlu / membingungkan dari kode yang diimpor.
Quinn Turner

Refactoring. Anda dapat mengubah kode, mis. ganti nama file, selama Anda menjaga ekspor di index.ts tetap sama.
user77115

3

index.ts membantu kami untuk menjaga semua hal yang terkait bersama dan kami tidak perlu khawatir tentang nama file sumber.

Kita dapat mengimpor semua hal dengan menggunakan nama folder sumber.

import { getName, getAnyThing } from './util';

Di sini util adalah nama folder bukan nama file yang memiliki index.tsyang mengekspor ulang keempat file.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.