How to import only used operators in RxJS 6 like o

问题:

Previously I was able to import only used operators with this code:

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

This generates a small bundle (vendor.ts).
How to do this with RxJS without requiring rxjs-compat?
Changing the code above to import 'rxjs'; generates a bigger bundle.

UPDATE:

I followed all the answers you've posted but nothing works well. This is my updated 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';

I also tried using 'rxjs/add/operator/*'.

This is how I'm importing 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';   

I changed my Webpack 3 configuration according to this document (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking) and nothing works.

Finally, take a look at the Webpack Bundle Analyzer result:

The bundle includes all operators. I found this related issue: https://github.com/angular/angular-cli/issues/9069

回答1:

rxjs-compat is supposed to be installed together with rxjs, it provides the support for old-style imports.

It's possible to use RxJS 6 the same way as RxJS 5:

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

This compatibility layer is expected to be removed in RxJS 7.

回答2:

The issue for me was that I had module set to commonjs in tsconfig.json. It needs to be set to es6, because webpack needs es6 modules in order for it to be able to do tree shaking.

See more info in: https://webpack.js.org/guides/tree-shaking/

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export...

...

• Use ES2015 module syntax (i.e. import and export).
• Ensure no compilers transform your ES2015 module syntax into CommonJS modules

回答3:

Now You need to import functions that You want to use.

Never use

import from 'rxjs'

Use with destructuring

import { Observable } from 'rxjs'

Import operators from 'rxjs/operators'

Static functions from 'rxjs'

So, for example, you need to use operator 'map' you will import it

import { map } 'rxjs/operators';

And then you use it with pipe

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

For better understanding read Migration Guide or watch awesome video from ng-conf

回答4:

You just need this two-part of code:

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

In this list, you can add any operator that you need to use.

Import { Observable } from "rxjs"