모든 index.ts는 무엇에 사용됩니까?


132

몇 가지 시드 프로젝트를 살펴본 결과 모든 구성 요소에 해당 구성 요소에서 *를 내보내는 index.ts가있는 것 같습니다. 실제로 사용되는 곳을 찾을 수 없습니까?

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

감사


1
이 토론과 관련하여 github 에서이 문제 가 있습니다. Angular 프로젝트에서 배럴 파일을 사용하기 전에 읽어보십시오.
BeetleJuice

답변:


227

로부터 Angular.io V2의 보관 용어 에 대한 항목 Barrel* :

배럴은 여러 모듈에서 단일 편의 모듈로 내보내기를 롤업하는 방법입니다. 배럴 자체는 다른 모듈의 선택된 내보내기를 다시 내보내는 모듈 파일입니다.

heroes 폴더에 세 개의 모듈이 있다고 상상해보십시오.

// 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';

다음 항목을 모두 내보내는 heroes 폴더 (일반적으로 색인이라고 함)에 배럴을 추가 할 수 있습니다.

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

Angular 범위 패키지에는 각각 index라는 배럴이 있습니다.

참조 예외 : 모든 매개 변수를 확인할 수 없습니다


* 참고 : 최신 버전의 Angular 용어집Barrel 에서 제거되었습니다 .

업데이트 Angular의 최신 버전에서는 배럴 파일을 아래와 같이 편집해야합니다.

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'. 또한 더 이상 배럴을 권장하지 않는 Angular
The Red Pea

1
@TheRedPea 힌트 주셔서 감사합니다. 링크 된 페이지 (이전 버전)에서 인용 한 것이므로 변경하고 싶지 않습니다.
Günter Zöchbauer

index.js를 자동으로 생성하는 도우미 라이브러리 또는 명령이 있습니까?
tom10271

1
@AlexanderAbakumov 컴포넌트, 지시어 또는 파이프는 하나의 모듈에만 속해야하며 모듈에서 위의 내용을 선언하여 해당 모듈을 가져올 때 본질적으로 동일한 것을 달성합니다. 모듈.
rism

2
@ Qwerty 이것이 트리 쉐이킹과 함께 작동한다고 확신하지만 배럴을 사용하는 것이 오래 전에 제안 된 관행에서 제거되었습니다. 모듈이 1.0 직전에 소개되었을 때 생각합니다.
Günter Zöchbauer

29

index.tsindex.jsnodejs 와 비슷 하거나 index.html웹 사이트 호스팅입니다.

따라서 말할 때 지정된 디렉토리 내부 import {} from 'directory_name'를 찾아 index.ts내 보낸 것을 가져옵니다.

예를 들어, 당신은 경우 calculator/index.ts

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

넌 할 수있어

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

3
@FlowerScape 인덱스를 통한 내보내기는 라이브러리 또는 모듈 수준 코드를 생성 할 때 특히 유용하므로 최종 사용자가 가져 오는 세부 정보가 적습니다. 또한 가져온 코드의 불필요하거나 혼란스러운 구현 세부 정보를 숨 깁니다.
Quinn Turner

리팩토링. 예를 들어 코드를 변경할 수 있습니다. index.ts의 내보내기를 동일하게 유지하는 한 파일 이름을 바꿉니다.
user77115

3

index.ts 관련된 모든 것을 함께 유지하도록 도와 주므로 소스 파일 이름에 대해 걱정할 필요가 없습니다.

소스 폴더 이름을 사용하여 모든 것을 가져올 수 있습니다.

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

여기에서 util은 파일 이름이 아닌 폴더 이름으로 index.ts4 개의 파일을 모두 내 보냅니다.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.