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] = {メイン:「インデックス」};
  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。

これら 2 つのコンポーネントを別のクラスで使用するには、次の 3 つの方法でインポートします。

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

この最後のケースでは、インデックス ファイルを指定する必要さえなく、インデックス ファイルを保持するフォルダーへのパスを書き込むだけで済みました。

バレルは基本的に、インポートステートメントが少なくなり、短くなります。この場合、バレルごとに 1 つのクラスをエクスポートするだけですが、1 つのバレルで必要な数だけエクスポートできます。

その上、バレルを再輸出できます。たとえばindex.ts、components次の 2 つのエクスポートを含むフォルダーに を含めることができます。

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

これで、次のようにインポートできます。

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

あるいは単に：

import * from './components';

2.何を意味しますか: ハードコードされた「インデックス」を持つメイン プロパティはここにありますか? cliSystemConfigPackages[barrelName] = {メイン:「インデックス」};

おそらくすでにご想像のとおり、これはバレルが名前のファイルになることを示しています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.tsはexport * from './my-component'、SystemJS がこれがバレルであることを知らなかったためindex.js、my-componentフォルダー内で名前が付けられたファイルを検索する必要があることをモジュール システムに通知しなかったためですmy-component.js。

今のところ、私は彼らのベストプラクティスに固執し、絶対にすべてのフォルダーにファイルを置き、そのサブフォルダー内の他のバレルを含むその中のすべてをエクスポートし、 inindex.tsを保持するフォルダーへのすべてのパスを追加します.index.tssystem-config.ts

于 2016-08-02T22:34:06.343 に答える