सभी index.ts किसके लिए उपयोग किए जाते हैं?


132

मैं कुछ बीज परियोजनाओं को देख रहा हूं और सभी घटकों को एक index.ts लगता है जो उस घटक से * निर्यात करता है। मैं कहीं भी नहीं ढूँढ सकता कि यह वास्तव में किसके लिए उपयोग किया जाता है?

जैसे https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

धन्यवाद


1
इस चर्चा के प्रासंगिक जीथुब पर यह मुद्दा है। आप अपने कोणीय परियोजना के साथ बैरल फ़ाइलों का उपयोग करने से पहले इसके माध्यम से पढ़ना चाह सकते हैं
बीटलज्यूइस

जवाबों:


227

से Angular.io v2 के संग्रहीत शब्दकोष के लिए प्रवेश Barrel* :

एक बैरल कई मॉड्यूल से एकल सुविधा मॉड्यूल में रोलअप निर्यात करने का एक तरीका है। बैरल स्वयं एक मॉड्यूल फ़ाइल है जो अन्य मॉड्यूल के चयनित निर्यात को फिर से निर्यात करता है।

एक नायक फ़ोल्डर में तीन मॉड्यूल की कल्पना करें:

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

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

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

एक बैरल के बिना, एक उपभोक्ता को तीन आयात विवरणों की आवश्यकता होगी:

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

हम हीरो फ़ोल्डर में एक बैरल जोड़ सकते हैं (सम्मेलन द्वारा सूचकांक कहा जाता है) जो इन सभी वस्तुओं का निर्यात करता है:

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

अब एक उपभोक्ता आयात कर सकता है कि उसे बैरल से क्या चाहिए।

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

कोणीय स्कूप्ड पैकेज में प्रत्येक में एक बैरल होता है जिसका नाम इंडेक्स होता है।

यह भी देखें : सभी मापदंडों को हल नहीं कर सकते


* नोट: कोणीय शब्दावली के अधिक हाल के संस्करणोंBarrel से हटा दिया गया है ।

अद्यतन कोणीय के नवीनतम संस्करणों के साथ, बैरल फ़ाइल को नीचे के रूप में संपादित किया जाना चाहिए,

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

5
जब मैं इसके समतुल्य होता export * from './hero.model.ts'हूं, तो मुझे एक संदेश मिलता है जैसे "'एक आयात पथ' .ts '' के साथ समाप्त नहीं हो सकता है" इसलिए मैं सिर्फ बदल जाता हूं export * from './hero.model'। एंगुलर के बारे में अपनी टिप्पणी को दोहराने के अलावा, बैरल की सिफारिश नहीं करना
लाल मटर

1
@ TheRedPea संकेत के लिए धन्यवाद। मैं इसे बदलना नहीं चाहता क्योंकि यह लिंक (पृष्ठ के पुराने संस्करण से) का एक उद्धरण है
गुंटर जोचबॉयर

क्या आपको पता है कि index.js को स्वचालित रूप से उत्पन्न करने के लिए कोई सहायक पुस्तकालय या कमांड है?
tom10271

1
@AlexanderAbakumov चूंकि एक घटक, निर्देश या पाइप एक और केवल एक मॉड्यूल से संबंधित होना चाहिए, तब एक मॉड्यूल में उपरोक्त में से कोई भी घोषित करने से, जब आप उस मॉड्यूल को आयात करते हैं तो आप अनिवार्य रूप से एक ही चीज हासिल करते हैं ... यह मानते हुए कि आपने उन्हें भी निर्यात किया है। मॉड्यूल।
प्रिज्म

2
@ क्वर्टी मुझे पूरा यकीन है कि यह ट्री-शेकिंग के साथ काम करता है, लेकिन बैरल का उपयोग करने का सुझाव बहुत समय पहले सुझाए गए व्यवहारों से हटा दिया गया था, मुझे लगता है कि जब मॉड्यूल 1.0 से ठीक पहले पेश किया गया था।
गुंटर Zöchbauer

29

index.tsindex.jsनोडज में समान है या index.htmlवेब साइट होस्टिंग है।

इसलिए जब आप कहते हैं कि import {} from 'directory_name'यह index.tsनिर्दिष्ट निर्देशिका के अंदर दिखेगा और वहां जो भी निर्यात किया जाता है उसे आयात करें।

उदाहरण के लिए यदि आपके पास calculator/index.tsहै

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

तुम कर सकते हो

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

3
पुस्तकालयों या मॉड्यूल-स्तरीय कोड बनाते समय सूचकांक के माध्यम से @FlowerScape विशेष रूप से उपयोगी होता है, ताकि अंतिम उपयोगकर्ताओं के पास कम मात्रा में आयात हो। यह आयातित कोड के किसी भी अनावश्यक / भ्रमित कार्यान्वयन विवरण को भी छुपाता है।
क्विन टर्नर

पुनर्रचना। आप कोड बदल सकते हैं, पूर्व। फ़ाइलों का नाम बदलें, जब तक आप निर्यात को इंडेक्स में रखते हैं।
user77115

3

index.ts सभी संबंधित चीजों को एक साथ रखने में हमारी मदद करें और हमें स्रोत फ़ाइल नाम के बारे में चिंता करने की आवश्यकता नहीं है।

हम स्रोत फ़ोल्डर नाम का उपयोग करके सभी चीज़ों को आयात कर सकते हैं।

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

यहाँ उपयोग फोल्डर का नाम है न कि फाइल का नाम जिसमें index.tsसभी चार फाइलों को फिर से एक्सपोर्ट करना है।

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.