デフォルトでは、angular-cliプロジェクトでは、tslint設定に波打つものが詰め込まれています。最近、新しい開発者から、Atomでtslintインスタンスを構成したとの連絡がありました。
私は次の行について尋ねられました:
import { Observable, BehaviorSubject } from 'rxjs';
TSLinterは、rxjsがブラックリストに登録されていると言っています。 tslint.jsonファイルにアクセスしたところ、確かにリストされていました。
このブラックリストとは何ですか?アプリを何かから保護しますか?
Rxjsがデフォルトでリストに追加されるのはなぜですか?
どのような条件下で何か他のものを追加する必要がありますか?
私は問題を「修正」する方法を知っていることを指摘したいと思います::
import { Observable } from 'rxjs/observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
問題は、TSLintのコンテキストでのブラックリストの意味にまだあります。
これは、(少なくともブラウザアプリでは)'rxjs'
からインクルードしてはならず、常に'rxjs/Observable'
や'rxjs/BehaviorSubject'
などのより具体的なものを使用する必要があるためです。
'rxjs'
を含めると、実際には次のファイルが含まれます: https://github.com/ReactiveX/rxjs/blob/master/index.js バンドルされているRxJSライブラリ全体が含まれます(すべてのオペレーター、スケジューラーなど)。したがって、使用しないものがたくさん含まれていると、アプリが必要以上に大きくなります(webpack2を使用したツリーシェイクは役に立たないと思います。コードが含まれると、最終パッケージの一部になります。しかし、私は間違っているかもしれません)。
node
アプリ(バックエンドアプリなど)の'rxjs'
から直接インポートしても問題ないと思います。この場合、使用しないコードも含まれていても問題ありません。使いやすいです。
その理由は、rxjsのモジュール全体をロードしたくないため、tslint.jsonが変更されたためです。 on Angular依存関係の読み込みが重くなるため、アプリケーション。代わりに、アプリケーションに必要なサブモジュールのみを読み込みます。
それを解決するには、変更します
import { Observable, BehaviorSubject } from 'rxjs';
に:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
このリンクはもう少し明確に説明しています:
基本的に、
import { Observable, BehaviorSubject } from 'rxjs';
または
import { Observable, BehaviorSubject } from 'rxjs/Rx';
rx.jsをプルして、rxjsライブラリにすべて(Observable、BehaviorSubject、ReplaySubject、Subscriber、Subscriptionなど)をインポートします。これは、実際よりもはるかに多くの依存関係です。インポートするファイルでこれらのほとんどを実際に使用する必要がない限り、次のように各依存関係を独自の行にインポートすることをお勧めします。
import { Observable } from 'rxjs/Observable';
import { Subscription} from 'rxjs/Subscription';
これにより、引き込まれる依存関係が少なくなり、コンパイルされたファイルサイズが小さくなることが期待されます。