Как импортировать `Observable` из` Rx` (не угловой)

Question

Я использую SystemJS для загрузки моего проекта es2015 в браузер.

Это то, что я сделал

import {Observable} from 'rxjs/Rx'; 

const button = document.querySelector('button'); 
const start$ = Observable.fromEvent(button, 'click'); 

В этом случае Observable является undefined. Так что я попытался

import Observable from 'rxjs/Observable'; 

В этом случае Observable является объектом, но Observable.fromEvent является undefined (это, кажется, пустой объект)

Наконец я сделал

import Rx from 'rxjs/Rx' // Rx.Observable 

, который сделал работу. Любые идеи, почему два других не работали? Я видел код, в котором они использовали их. Каким будет предпочтительный способ импорта Observable?

ОБНОВЛЕНИЕ: Как указано ниже, все это описано в README. Однако, если я что

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 

const start$ = Observable.fromEvent(startButton, 'click'); 

Я получаю Observable это undefined. И если я

import Observable from 'rxjs/Observable'; 

Observable является пустой объект снова. fromEvent не добавляется.

Я использую RxJs 5.1.1 и вот мой index.html/systemjs часть:

<script src="./node_modules/systemjs/dist/system.js"></script> 
    <script> 
     SystemJS.config({ 
      baseURL: 'node_modules', 
      packages: { 
       '.': { 
        defaultJSExtensions: 'js' 
       } 
      }, 
      map: { 
       'plugin-babel': 'systemjs-plugin-babel/plugin-babel.js', 
       'systemjs-babel-build': 'systemjs-plugin-babel/systemjs-babel-browser.js' 
      }, 
      transpiler: 'plugin-babel' 
     }); 

     SystemJS.import('/js/main.js'); 
    </script> 

Answer 1

Как отмечает in the README, вы можете использовать import { Observable } from 'rxjs/Observable';:

Чтобы импортировать только что вам необходимо запланировать (это полезно для связывания с размерами)

Это дает вам минимальное значение Observable, t o что вам нужно явно добавить любую дополнительную функциональность, которую вы планируете использовать; в вашем случае, следуйте за ним:

import 'rxjs/add/observable/fromEvent'; 

Answer 2

У меня была такая же проблема при перекодировании из TypeScript. Затем я переключился на использование только скомпилированных скриптов с точно такими же параметрами, и это сработало, поэтому я подозрительно, что он имеет какое-то отношение к транслированию вашего скрипта. Плохие вещи, вероятно, нет простого способа проверить, какой код он сгенерировал.

Во всяком случае, различные виды импорта являются:

1. import {Observable} from 'rxjs/Rx'

   Поскольку вы используете baseURL вариант это будет искать файл node_modules/rxjs/Rx.js. Это точка входа RxJS, которая требует всех Observables, Subjects, operator и так далее ... (около 300 файлов), и вы импортируете только класс Observable.

2. import Observable from 'rxjs/Observable'

   Это импортирует только node_modules/rxjs/Observable.js файл и его зависимости (около 20 файлов).

3. import Rx from 'rxjs/Rx'

   Это не должно работать. RxJS не экспортирует Rx. Вы можете увидеть сами на src/Rx.ts

Если вы загружаете отдельные файлы вы можете использовать аналогичные конфигурации, как это:

System.config({ 
    packages: { 
    'src': { 
     defaultExtension: 'js' 
    }, 
    'rxjs': { 
     defaultExtension: 'js' 
    } 
    }, 
    paths: { 
    'npm:': 'node_modules/', 
    'main': 'src/index' 
    }, 
    map: { 
    'rxjs': 'npm:rxjs' 
    } 
}); 

Тогда весь импорт загружаются в виде отдельных файлов. Например, rxjs/util/isFunction = /node_modules/rxjs/util/isFunction.js.

Это не очень удобно в браузере, потому что будет очень медленно. Однако вы можете загрузить вложенную версию с помощью шаблона *. Обратите внимание, что это работает только в SystemJS 0,19 *:..

System.config({ 
    packages: { 
    'src': { 
     defaultExtension: 'js' 
    }, 
    'rxjs': { 
     defaultExtension: 'js' 
    } 
    }, 
    paths: { 
    'npm:': 'node_modules/', 
    'main': 'src/index', 
    'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js' 
    } 

В SystemJS 0,20 * подстановочный * не работает больше (https://github.com/systemjs/systemjs/issues/1039)

С помощью этой конфигурации можно использовать все:

import {Observable} from 'rxjs'; 
import {Observable} from 'rxjs/Observable'; 
import {Observable} from 'rxjs/Rx'; 

Обратите внимание, что ситуация в node среде отличается тем, что вы всегда можете использовать только import {Observable} from 'rxjs' благодаря main опции в composer.json.

Answer 3

Поскольку у меня такая же проблема в моем проекте, я пытаюсь отладить systemJs, чтобы понять.

Теперь я могу сказать, что systemJS в основном работает следующим образом: Он пересылает файлы модулей в сеттеры и выполняет их. устанавливают зависимости нагрузки и вводят их в переменные IIFE. Выполняет выполнение кодов модулей, когда все сеттеры установлены. Это то, что вы написали, прежде чем перевести.

(function(System, SystemJS) {System.register(["node_modules/rxjs/Subject.js"], function (_export, _context) { 
 
    "use strict"; 
 

 
    var Subject; 
 
    return { 
 
     setters: [function (_node_modulesRxjsSubjectJs) { 
 
      Subject = _node_modulesRxjsSubjectJs.Subject; 
 
     }], 
 
     execute: function() { 
 
      class PetriNode { 
 
       constructor(name) { 
 
        this.from = []; 
 
        this.to = []; 
 
        
 
... 
 
...

Я обнаружил, что systemJS загружает модули с this project

в этой линии: линия 612 RxJs виды материала и все нагрузки до штрафа.

 err = dynamicExecute(link.execute, require, moduleObj.default, module);

После выполнения, в module.exports и moduleObj .__ useDefault загружается прекрасно. Все Rx-классы и выходы есть.

Но все Значения по умолчанию не удалось получить СКОПИРОВАНЫ в moduleObj, как после этого:

А потом, когда сеттер называется, введенный аргумент moduleObj, который имеет .Default свойство имеет все надлежащее вывода, но сеттер не смог вызвать их, но сам moduleObj.

ИмпортерПриборы называются в первый раз, когда все Rx выполнены и начинают работать с моими модулями ECMA2015. Он пропускается каждый раз, когда импорт не требуется, но требует.

Я не понимаю, как я должен обрабатывать commonJS по умолчанию с .d.ts с импортом. Я видел, что системаJS могла иметь дело с commonJS и ECMA2015 раньше. Я сделал это самостоятельно, но не вместе.

Answer 4

У меня возникла аналогичная проблема, и мне удалось разблокировать мой модуль tsconfig.json с «системы» на «commonjs», а файлы Rx lib передаются без геттеров.

Answer 5

Это, кажется, известная проблема.

https://github.com/systemjs/systemjs/issues/334

Из документации ocumentation:

Любой тип модуля может быть загружен из любого другого типа, с полной поддержкой.

При загрузке модулей CommonJS, AMD или Global из ES6, полный модуль доступен при экспорте по умолчанию, который может быть загружен синтаксисом импорта по умолчанию .

Для удобства названный экспорт также автоматически заполняется, но может не быть правильно привязан, как и ожидалось, поэтому используйте их тщательно.

./app/es6-loading-commonjs:

// entire underscore instance 
import _ from './underscore.js'; 

// unbound named export 
import {map} from './underscore.js'; 

https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#inter-format-dependencies