3

我正在使用 Angular 2 和 CLI。

由于没有关于https://github.com/angular/angular-cli的信息

关于桶的含义与我在这里问的 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' };
    });
4

1 回答 1

2
  1. 什么是桶？一份文件？文件夹？一批组件？

来自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';

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

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

最重要的是，我们可以再出口桶。例如，我们可以index.ts在components文件夹中有一个包含这两个导出的文件夹：

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

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

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

要不就：

import * from './components';

2.什么意思：这里有硬编码“索引”的主要属性？cliSystemConfigPackages[barrelName] = { main: 'index' };

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

数组命名可能有点令人困惑，barrels但它实际上包含包含桶文件的文件夹，这可能就是您在问题 1 中询问桶是文件、文件夹还是一组组件的原因。在他们的风格指南中，他们将其定义为一个文件。

3.当下面的配置由CLI管理时，如果我不使用CLI会发生什么？

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

import { MyComponent } from './components';

我已经准备好了所有的桶，但是我忘记app/components/my-component在 SystemJSsystem-config.ts文件中添加桶数组（使用 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.tsI put中export * from './my-component'，并且由于 SystemJS 不知道这是一个桶，因此没有告诉模块系统它应该在文件夹中搜索一个名为index.js的my-component文件，它只是去尝试获取一个名为my-component.js.

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

于 2016-08-02T22:34:06.343 回答