angular - angular 2 CLI 配置中 'cliSystemConfigPackages' 对象的任务是什么

Question

我正在使用 angular 2 和 CLI。

由于不存在关于https://github.com/angular/angular-cli 的信息

关于 barrels 与 angular 2 CLI 工具结合的意义，我在这里问...

到目前为止，我的 Angular 2 应用程序运行正常，这意味着我在运行时没有遇到任何错误。但我担心迟早会改变，因为我可能无法正确使用 angular 2 CLI。这意味着我并不总是使用 ng generate component my-new-component 来创建组件。当我使用它时，我删除了每个组件的 create index.ts，因为我认为我不需要它。

所以我在这里有 3 个问题:

1. 什么是桶？一份文件？文件夹？一批组件？
2. 什么意思:此处带有硬编码“索引”的主要属性？ cliSystemConfigPackages[barrelName] = { main: 'index' };
3. 当以下配置由 CLI 管理时，如果我不使用 CLI，会发生什么情况？

这是 system.config.ts

的一部分

/***********************************************************************************************
     * Everything underneath this line is managed by the CLI.
     **********************************************************************************************/
    const barrels: string[] = [
      // Angular specific barrels.
      '@angular/core',
      '@angular/common',
      '@angular/compiler',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',

      // Thirdparty barrels.
      'rxjs',

      // App specific barrels.
      'app',
      'app/shared',
      'app/test/create',
      'app/test/edit',
      'app/administration' 
      /** @cli-barrel */
    ];

    const cliSystemConfigPackages: any = {};
    barrels.forEach((barrelName: string) => {
      cliSystemConfigPackages[barrelName] = { main: 'index' };
    });

Answer 1

1. What is a barrel? A file? folder? A batch of components?

定义取自 Angular 2 Style Guide :

“考虑创建一个导入、聚合和重新导出项目的文件。我们称这种技术为桶。”

假设您有一个空文件夹 src/app/components 并在该文件夹中运行 ng generate component MyComponent。这将创建一个包含 5 个文件的文件夹:

|-- my-component
|   |-- my-component.component.css
|   |-- my-component.component.html
|   |-- my-component.component.spec.ts
|   |-- my-component.component.ts
|   |-- index.ts

index.ts 是桶，其目标是重新导出 my-component.component.ts 中的类，因此其内容为:

export * from './my-component.component';

为了使示例更加清晰，我们现在生成一个组件 MyComponent2，它将有自己的文件夹和 index.ts。

现在我们通过以三种不同的方式导入这两个组件来在另一个类中使用它们:

1.我们根本不用桶:

import { MyComponent } from './components/my-component/my-component.component';
import { MyComponent2 } from './components/my-component2/my-component2.component';

2.我们使用了桶，但是我们没有在system.config.ts中添加它们:

import { MyComponent } from './components/my-component/index';
import { MyComponent2 } from './components/my-component2/index';

3.我们使用桶并将它们添加到 system.config.ts 中:

import { MyComponent } from './components/my-component';
import { MyComponent2 } from './components/my-component2';

在最后一种情况下，我们甚至不必指明索引文件，只需将路径写入包含它的文件夹即可。

桶基本上是有更少和更短的进口声明。在这种情况下，我们只是每桶导出一个类，但您可以在一个桶中导出任意数量的类。

除此之外，我们还可以再导出桶。例如，我们可以在 components 文件夹中有一个 index.ts，其中包含以下两个导出:

export * from './my-component';
export * from './my-component2';

现在我们可以像这样导入它们了:

import { MyComponent, MyComponent2 } from './components';

或者只是:

import * from './components';

2.What means: the main property with the hardcoded 'index' here? cliSystemConfigPackages[barrelName] = { main: 'index' };

正如您可能已经猜到的那样，这表明我们的桶将是名为 index 的文件。因此，对于我们在 barrels 数组中指定的每个文件夹，其中必须有一个 index.ts 文件(编译时为 index.js ).

数组名为 barrels 可能有点令人困惑，但它实际上包含包含 barrel 文件的文件夹，也许这就是为什么你在问题 1 中询问 barrel 是否是文件、一个文件夹或一批组件。在他们的风格指南中，他们将其定义为文件。

3.When the below configuration is managed by the CLI, what will happen when I do not use the CLI consequently?

这将取决于我们如何导入文件，但如果我像这样导入 MyComponent ，一个常见的错误是:

import { MyComponent } from './components';

我已经准备好了所有的桶，但是我忘了在 SystemJS system-config.ts 文件的桶数组中添加 app/components/my-component (当使用 ng generate 时，它​​们会被自动添加)，应用程序编译时不会出现错误，但每当它需要加载 MyComponent 时，它就会失败，我会在控制台中看到这个错误:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:4200/app/components/my-component.js 

那是因为在 app/components/index.ts 我放了 export * from './my-component' 因为 SystemJS 不知道这是一个桶因此没有告诉模块系统它应该在 my-component 文件夹中搜索名为 index.js 的文件，它只是去尝试获取一个名为 my-component.js 的文件。

现在我只是坚持他们的最佳实践，在每个文件夹中都有一个 index.ts 文件，并让它导出其中的所有内容，包括其子文件夹中的其他桶，并添加所有system-config.ts 中包含 index.ts 的文件夹的路径。