如何像旧的RxJS一样只导入RxJS 6中使用的运算符，而不需要rxjs-compat？

Question

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

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捆绑分析器的结果：

​

​

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

Answer 1

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

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

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

此兼容层预计将在RxJS 7中删除。

Answer 2

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

有关详细信息，请访问：https://webpack.js.org/guides/tree-shaking/

树摇动是JavaScript上下文中用于消除死代码的常用术语。它依赖于ES2015模块语法的静态结构，即导入和导出...

..。

• 使用ES2015模块语法(即import和export).
• Ensure无编译器将ES2015模块语法转换为CommonJS模块

Answer 3

现在，您需要导入要使用的函数。

从不使用

从'rxjs‘导入

与解构一起使用

从'rxjs‘导入{

}

从'rxjs/operators'导入运算符

来自'rxjs'的静态函数

例如，您需要使用运算符'map‘来导入它

import { map } 'rxjs/operators';

然后将其与管道一起使用

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

要更好地理解，请阅读Migration Guide或观看来自ng-conf的精彩视频