angular项目为什么使用index文件重新导出组件和模块？

发表于 更新于 分类于
许多angular项目每个文件夹中都会有一个index.ts文件用来导出文件夹下其他文件的内容（其实其他每个文件内都有导出语句）。为什么重新导出所有文件呢？不会很麻烦吗？

1. 前言

许多angular项目每个文件夹中都会有一个index.ts文件用来导出文件夹下其他文件的内容（其实其他每个文件内都有导出语句）。为什么重新导出所有文件呢？不会很麻烦吗？

2. barrel 官方解释

其实这种做法是angular 2时写入Angular style guide的官方代码风格，被称为barrel，现在已经从官方规范中移出。

In the Angular 2 docs, a barrel is defined as: “A barrel is a way to rollup exports from several modules into a single convenience module. The barrel itself is a module file that re-exports selected exports of other modules.”

3. 代码解释

假如heroes文件夹下有三个 modules:

1
2
3
4
5
6
7
8
// heroes/hero.component.ts
export class HeroComponent {}

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

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

不使用barrel导出，调用方若要使用以上三个模块需：

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

使用barrel，在heros文件夹下增加 index.ts文件，导出其他所有文件内容：

1
2
3
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

调用方可从barrel中引入所有模块：

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

4. barrel 优点

  1. 解决import语句冗长，笨重的问题。
  2. 调整文件夹结构时，减少引用路径错乱的问题。

5. 参考