什么是 tslint 黑名单，为什么 angular-cli 默认 rxjs 在 tslint.json 的列表中？答案

【问题标题】：What is the tslint blacklist and why does angular-cli default rxjs on the list in tslint.json?什么是 tslint 黑名单，为什么 angular-cli 默认 rxjs 在 tslint.json 的列表中？
【发布时间】：2018-01-23 15:21:07
【问题描述】：

默认情况下，使用 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 angular-cli tslint

【解决方案1】：

这是因为您应该（至少在浏览器应用程序中）永远不要包含来自 'rxjs' 并始终使用更具体的内容，例如 'rxjs/Observable' 或 'rxjs/BehaviorSubject'。

当您包含'rxjs' 时，您实际上包含了这个文件：https://github.com/ReactiveX/rxjs/blob/master/index.js，其中包含整个捆绑的 RxJS 库（所有运算符、调度程序等）。因此，您包含了很多您甚至不使用的东西，并且您的应用程序变得比必要的更大（我认为使用 webpack2 进行 tree-shaking 并没有帮助，一旦包含代码，它将成为最终包的一部分，但我可能错了）。

我认为可以直接从'rxjs' 导入node 应用程序（例如后端应用程序），其中包含您不会使用的代码并不重要，这种方式只是更容易使用。

【讨论】：

同意...但不完全是我的问题的答案...寻找更清晰的 tslint '黑名单'
blacklist 选项将导入列入黑名单，并在您尝试使用它时发出警告。我想这就是为什么它被称为黑名单...palantir.github.io/tslint/rules/import-blacklist。当然你可以删除它，你的应用程序就可以运行了。
该链接提供了丰富的信息。出于某种原因，我的搜索没有拉上来。因此，只要项目中的所有开发人员都在关注 tslint 设置，这将是一个很好的“工具”。我会确保它会得到执行，如果我们开始包含下划线等其他项目，则将其视为同一个系列的一部分。
显然，这不再正确：github.com/angular/devkit/issues/585#issuecomment-377845078
从 Angular 11 开始，当您将 rxjs 添加到项目中时，唯一被列入黑名单的是 rxjs/Rx。我认为添加rxjs' and 'rxjs/internal 是明智的，后者是因为它是一个常见的自动导入问题，主要用于 VSCode 中的订阅，但这可能不是你要寻找的机器人，所以它也有助于防止这种情况.

【解决方案2】：

原因是 tslint.json 的变化，因为他们不希望 rxjs 的整个模块在 Angular 应用程序上加载依赖加载更重。而是仅加载您的应用程序所需的子模块。

要解决它，改变

import { Observable, BehaviorSubject } from 'rxjs';

到：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

【讨论】：

【解决方案3】：

这个链接解释得更清楚一点：

https://fullstack-developer.academy/resolving-import-is-blacklisted-tslint-error-for-rxjs-and-angular/

基本上，当你像导入一样

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

这会减少引入的依赖项，并希望编译后的文件大小更小。

【讨论】：