3

以前我只能使用以下代码导入使用过的运算符：

import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/throw';

这会生成一个小包（vendor.ts）。
如何在不需要 rxjs-compat 的情况下使用 RxJS 做到这一点？
更改上面的代码以import 'rxjs';生成更大的包。

更新：

我遵循了您发布的所有答案，但没有任何效果。这是我更新的 vendor.ts：

import 'rxjs/Observable';
import 'rxjs/Subscription';
import 'rxjs/Subject';
import 'rxjs/observable/throw';
import 'rxjs/operators/map';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/catchError';
import 'rxjs/operators/finalize';

我也尝试使用'rxjs/add/operator/*'。

这就是我导入 rxjs 的方式：

import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';
import {_throw} from 'rxjs/observable/throw';
import {map} from 'rxjs/operators/map';
import {mergeMap} from 'rxjs/operators/mergeMap';
import {catchError} from 'rxjs/operators/catchError';
import {finalize} from 'rxjs/operators/finalize';

我根据本文档（https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking）更改了我的 Webpack 3 配置，但没有任何效果。

最后，看一下 Webpack Bundle Analyzer 结果：

在此处输入图像描述

该捆绑包包括所有运算符。我发现了这个相关的问题： https ://github.com/angular/angular-cli/issues/9069

4

4 回答 4

4

rxjs-compat应该与 一起安装rxjs，它提供了对旧式导入的支持。

可以像使用 RxJS 5 一样使用 RxJS 6：

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

这个兼容层预计会在 RxJS 7 中被移除。

于 2018-05-18T17:57:34.767 回答
2

对我来说，问题是我已经在 tsconfig.json中module设置了。commonjs它需要设置为es6，因为 webpack 需要 es6 模块才能使其能够进行树摇动。

查看更多信息：https ://webpack.js.org/guides/tree-shaking/

Tree Shaking 是 JavaScript 上下文中常用的一个术语，用于消除死代码。它依赖于 ES2015 模块语法的静态结构，即 import 和 export ...

...

  • 使用 ES2015 模块语法（即导入和导出）。
  • 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 模块
于 2018-12-19T11:14:12.420 回答
1

现在您需要导入您想要使用的功能。

从不使用

从“rxjs”导入

与解构一起使用

从 'rxjs' 导入 { Observable }

导入运算符'rxjs/operators'

静态函数来自'rxjs'

因此，例如，您需要使用运算符“地图”，然后将其导入

import { map } 'rxjs/operators';

然后你将它与管道一起使用

observable.pipe(map(() => { some function }))

为了更好地理解，请阅读迁移指南或观看来自ng-conf 的精彩视频

于 2018-05-18T19:25:03.453 回答
1

您只需要以下两部分代码：

Import { filter, map } from "rxjs/operators"

在此列表中，您可以添加需要使用的任何运算符。

Import { Observable } from "rxjs"
于 2019-04-09T10:48:38.920 回答