Question

我正在使用角度2和CLI。

由于https://github.com/angular/angular-cli

上没有任何信息

关于桶的含义以及我在这里问的角度2 CLI工具......

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

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

什么是桶？一份文件？夹？一批组件？
含义：带有硬编码索引的主要属性＆＃39;这里？ cliSystemConfigPackages [barrelName] = {main：＆＃39; index＆＃39; };
如果以下配置由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

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

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

我已经准备好了所有的桶但我忘了在SystemJS app/components/my-component文件的桶数组中添加system-config.ts（当使用ng生成它们将自动添加时），应用程序将编译没有错误，但只要它需要加载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不知道这是一个桶，因此没有告诉模块系统它应该搜索一个名为{{1}的文件在index.js文件夹中，它刚刚开始尝试获取名为my-component的文件。

现在我只是坚持他们的最佳做法并在绝对每个文件夹中都有一个my-component.js文件并使其导出其中的所有内容，包括其子文件夹中的其他桶，并将所有路径添加到保存的文件夹中index.ts中的index.ts。

＆＃39; cliSystemConfigPackages＆＃39;的任务是什么？ angular 2 CLI配置中的对象

1 个答案: