Для чего используются все index.ts?

132

Я просматривал несколько исходных проектов, и все компоненты, похоже, имеют index.ts, который экспортирует * из этого компонента. Я нигде не могу найти, для чего он на самом деле используется?

Например, https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Спасибо

Zetki
источник
1
К этому обсуждению относится проблема на github. Вы можете прочитать его, прежде чем использовать файлы ствола в своем проекте Angular
BeetleJuice

Ответы:

228

Из заархивированной записи глоссария 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';

Мы можем добавить бочку в папку героев (называемую по соглашению index), которая экспортирует все эти элементы:

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.

См. Также ИСКЛЮЧЕНИЕ: не удается разрешить все параметры


* ПРИМЕЧАНИЕ: Barrel было удалено из более поздних версий глоссария Angular .

ОБНОВЛЕНИЕ В последних версиях 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 спасибо за подсказку. Я не хочу менять его, потому что это цитата из (более ранней версии) связанной страницы
Гюнтер Цохбауэр
Знаете ли вы, есть ли вспомогательная библиотека или команда для автоматического создания index.js?
tom10271
1
@AlexanderAbakumov Поскольку компонент, директива или канал должны принадлежать одному и только одному модулю, то, объявив что-либо из вышеперечисленного в модуле, при импорте этого модуля вы, по сути, достигнете того же ... при условии, что вы также экспортировали их из модуль.
rism 06
2
@Qwerty Я совершенно уверен, что это работает с встряхиванием деревьев, но использование бочек было удалено из предлагаемых практик давным-давно, я думаю, когда модули были представлены незадолго до 1.0.
Günter Zöchbauer
29

index.tsаналогичен index.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 Экспорт через индекс особенно полезен при создании библиотек или кода на уровне модуля, чтобы конечные пользователи имели менее подробный импорт. Он также скрывает любые ненужные / запутанные детали реализации импортированного кода.
Куинн Тернер
Рефакторинг. Вы можете изменить код, например. переименовывать файлы до тех пор, пока экспорт в index.ts не меняется.
user77115
3

index.ts помогите нам объединить все связанные вещи, и нам не нужно беспокоиться об имени исходного файла.

Мы можем импортировать все, используя имя исходной папки.

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

Здесь util - это имя папки, а не имя файла, в index.tsкотором повторно экспортируются все четыре файла.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
РАКЕШ ХОЛКАР
источник