Pertanyaan Cara mengimpor `Observable` dari` Rx` (tidak bersudut)


saya menggunakan SystemJS untuk memuat proyek es2015 saya ke browser.

Ini yang saya lakukan

import {Observable} from 'rxjs/Rx';

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

Pada kasus ini Observable aku s undefined. Jadi saya mencoba

import Observable from 'rxjs/Observable';

Dalam hal ini Observable adalah objek tetapi Observable.fromEvent aku s undefined (tampaknya benda kosong)

Akhirnya saya melakukannya

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

yang berhasil. Ada gagasan mengapa dua lainnya tidak berfungsi? Saya telah melihat kode di mana mereka menggunakan ini. Apa yang akan menjadi cara yang disukai untuk mengimpor Observable?

UPDATE: Sebagaimana dinyatakan di bawah ini semua yang dijelaskan dalam Baca aku. Namun jika saya melakukan itu

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

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

saya mendapat Observable aku s undefined. Dan jika saya melakukannya

import Observable from 'rxjs/Observable';

itu Observable adalah objek kosong lagi. Itu fromEvent tidak ditambahkan.

Saya menggunakan RxJs 5.1.1 dan ini adalah bagian index.html / systemjs saya:

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

6
2018-02-18 11:22


asal


Jawaban:


Seperti dicatat di README, Kamu dapat memakai import { Observable } from 'rxjs/Observable';:

Untuk mengimpor hanya yang Anda butuhkan dengan menambal (ini berguna untuk bundling ukuran-sensitif)

Ini memberi Anda sangat minim Observable, yang Anda perlu secara eksplisit menambahkan fungsi tambahan apa pun yang Anda rencanakan untuk digunakan; dalam kasus Anda, ikuti dengan:

import 'rxjs/add/observable/fromEvent';

2
2018-02-18 11:32



Saya mengalami masalah yang sama ketika melakukan pengiriman dari TypeScript. Lalu saya beralih menggunakan skrip yang dikompilasi dengan opsi yang sama persis dan itu berhasil jadi saya curiga ada hubungannya dengan memindahkan skrip Anda. Hal-hal buruk adalah mungkin tidak ada cara mudah untuk memeriksa kode apa yang dihasilkannya.

Bagaimanapun, berbagai jenis impor adalah sebagai berikut:

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

    Karena kamu menggunakan baseURL pilihan ini akan mencari file node_modules/rxjs/Rx.js. Ini adalah titik masuk RxJS yang membutuhkan semua Observabel, Subjek, operator, seterusnya ... (sekitar 300 file) dan Anda hanya akan mengimpor Observable kelas.

  2. import Observable from 'rxjs/Observable'

    Ini hanya impor node_modules/rxjs/Observable.js file dan dependensinya (sekitar 20 file).

  3. import Rx from 'rxjs/Rx'

    Ini seharusnya tidak bekerja sama sekali. RxJS tidak mengekspor apa pun Rx. Anda bisa lihat sendiri di src/Rx.ts

Jika Anda memuat file tunggal, Anda dapat menggunakan konfigurasi serupa seperti ini:

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

Lalu semua impor dimuat sebagai file tunggal. Sebagai contoh rxjs/util/isFunction = /node_modules/rxjs/util/isFunction.js.

Ini tidak sangat berguna di browser karena akan sangat lambat. Namun Anda dapat memuat versi paket dengan wildcard *. Perhatikan bahwa ini hanya berfungsi di 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'
  }

Di SystemJS 0.20. * Wildcard * tidak berfungsi lagi (https://github.com/systemjs/systemjs/issues/1039)

Dengan konfigurasi ini Anda dapat menggunakan semua:

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

Perhatikan bahwa situasi di node lingkungan berbeda karena Anda selalu dapat menggunakannya import {Observable} from 'rxjs' terimakasih untuk main opsi dalam composer.json.


1
2018-02-20 09:54



Karena saya memiliki masalah yang sama pada proyek saya, saya sudah mencoba untuk men-debug sistem yang harus dipahami.

Sekarang saya dapat mengatakan bahwa sistem JS pada dasarnya berfungsi seperti ini: Ini mentransmisikan file modul ke setter dan mengeksekusi. mengeset dependensi beban dan menyuntikkannya ke dalam variabel IIFE. jalankan menjalankan kode modul ketika setter sudah siap. Itu adalah apa yang Anda tulis sebelum transpile.

(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 = [];

... ...

Saya menemukan bahwa sistem JS memuat modul dengan proyek ini

dalam baris ini: baris 612, jenis barang RxJs dan semuanya dimuat dengan baik.

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

Setelah mengeksekusi, module.exports dan moduleObj .__ useDefault dimuat dengan baik. Semua Kelas dan output Rx ada di sana.

Tapi Semua Default gagal untuk mendapatkan COPIED ke moduleObj seperti setelah ini: load default into moduleObj

Dan kemudian, ketika penyetel dipanggil, argumen yang dimasukkan adalah moduleObj, yang memiliki properti .default memiliki semua output yang tepat, tetapi setter gagal memanggilnya dari tetapi moduleObj itu sendiri. load.module has no exported definitions. It's the load.module.default has them.

ImportirSetters disebut pertama kali ketika semua Rx selesai dan mulai berurusan dengan modul ECMA2015 saya. Ini dilewati setiap kali ketika tidak ada impor tetapi membutuhkan.

Saya tidak mengerti bagaimana seharusnya saya menangani default commonJS dengan .d.ts dengan impor. Saya telah melihat bahwa sistemJS dapat menangani commonJS dan ECMA2015 sebelumnya. Saya sudah melakukannya secara mandiri tetapi tidak bersama.


1
2017-10-09 08:44



Saya mengalami masalah yang sama, dan berhasil membuka blokir modul tsconfig.json saya dari "sistem" menjadi "commonjs", dan file Rx lib sedang terekam tanpa getter.


0
2017-10-16 17:29



Ini tampaknya merupakan masalah yang diketahui.

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

Dari dokumentasi dokumentasi:

Jenis modul apa pun dapat dimuat dari jenis lain apa pun dengan dukungan penuh.

Saat memuat modul CommonJS, AMD atau Global dari dalam ES6, penuh   modul tersedia di ekspor default yang dapat dimuat dengan   sintaks impor default.

Untuk kenyamanan, ekspor bernama juga otomatis terisi tetapi mungkin tidak   benar terikat seperti yang diharapkan, jadi gunakan ini dengan hati-hati.

./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


0
2017-10-16 18:14