Question

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

E.g 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 Error - EXCEPTION: Can't resolve all parameters

Answer 2

index.ts在nodejs中类似index.js，或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';

什么是index.ts用于？

3 个答案: