什么是index.ts用于？

Question

我一直在研究一些种子项目,所有组件似乎都有一个index.ts,它从该组件中导出*.我无法找到它实际用于的任何地方？

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

谢谢

Answer 1

来自https://angular.io/docs/ts/latest/guide/glossary.html 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

Angular范围的包每个都有一个名为index的桶.

另请参见Angular 2 DI错误 - EXCEPTION:无法解析所有参数

Answer 2

index.tsindex.js在nodejs中类似或是index.html网站托管.

所以当你说import {} from 'directory_name'它将index.ts在指定的目录中寻找并导入那里导出的任何内容时.

例如,如果您有calculator/index.ts作为

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

你可以做

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

Answer 3

index.ts帮助我们将所有相关的东西放在一起，我们不需要担心源文件名。

我们可以使用源文件夹名称导入所有内容。

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

这里 util 是文件夹名称而不是文件名，其中index.ts重新导出所有四个文件。

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';