Как импортировать только используемые операторы в RxJS 6, такие как старые RxJS, не требуя rxjs-compat? - PullRequest
Новая
       9

Как импортировать только используемые операторы в RxJS 6, такие как старые RxJS, не требуя rxjs-compat?

0 голосов
/ 18 мая 2018

Ранее мне удавалось импортировать только используемые операторы с этим кодом: 

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, не требуя rxjs-compat?
Изменение приведенного выше кода на 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';

Я изменил свою конфигурацию Webpack 3 в соответствии с этим документом (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking), и ничего не работает.

Наконец, взгляните на результат Анализатора пакетов Webpack:

enter image description here

В комплект входят все операторы. Я нашел эту связанную проблему: https://github.com/angular/angular-cli/issues/9069

Ответы [ 4 ]

0 голосов
/ 09 апреля 2019

Вам просто нужна эта две части кода: 

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

В этом списке вы можете добавить любой оператор, который вам нужно использовать. 

Import { Observable } from "rxjs"
0 голосов
/ 18 мая 2018

Теперь вам нужно импортировать функции, которые вы хотите использовать.

Никогда не использовать

импорт из 'rxjs'

Использовать с деструктуризацией

import {Observable} из 'rxjs'

Импорт операторов из 'rxjs/operators'

Статические функции из 'rxjs'

Так, например, вам нужно использовать оператор' map ', который вы импортируетеэто 

import { map } 'rxjs/operators';

И затем вы используете его с pipe 

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

Для лучшего понимания прочитайте Руководство по миграции или посмотрите потрясающее видео с ng-conf

0 голосов
/ 19 декабря 2018

Проблема для меня заключалась в том, что для module было установлено значение commonjs в файле tsconfig.json.Он должен быть установлен на es6, поскольку для веб-пакета требуются модули es6, чтобы он мог выполнять встряхивание дерева.

См. Дополнительную информацию в: https://webpack.js.org/guides/tree-shaking/

Встряхивание дерева - это термин, обычно используемый в контексте JavaScript для устранения мертвого кода.Он опирается на статическую структуру синтаксиса модуля ES2015, т. Е. Импорт и экспорт ...

...

  • Использование синтаксиса модуля ES2015 (т. Е. Импорт и экспорт).
  • Убедитесь, что компиляторы не преобразуют синтаксис вашего модуля ES2015 в модули CommonJS
0 голосов
/ 18 мая 2018

rxjs-compat предполагается установить вместе с rxjs, он обеспечивает поддержку импорта в старом стиле.

Можно использовать RxJS 6 так же, как RxJS 5: 

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

Этот слой совместимости, как ожидается, будет удален в RxJS 7.

...