Импорт модулей UMD Javascript в браузер
Привет, я занимаюсь исследованием RxJS. Я могу использовать библиотеку, просто ссылаясь на нее в своем браузере как таковую:
<script src = "https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
Он импортирует с помощью переменной пространства имен глобального объекта «Rx». Я могу делать наблюдаемые и делать все самое интересное.
Где все ломается, это когда я меняю src, чтобы указать на последний файл UMD, такой как этот <script src = "https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
Кажется, что импорт не работает, поскольку экспортированные объектные функции не существуют?
Я пытаюсь использовать особую функцию fromEvent, которая позволяет создавать наблюдаемое из любого события DOM.
Я получаю сообщение об ошибке при использовании последней версии файла UMD RxJS 6.2.2.
Почему это? Если вы заглянете внутрь файла js внизу, вы увидите экспорт функции, а вверху файла вы увидите глобальное пространство имен под названием «rxjs».
Я не использую никаких загрузчиков, таких как requirejs, и не использую никаких экспериментальных функций браузера. Я не использую никаких операторов импорта.
Я просто пытаюсь сослаться на глобальное пространство имен объекта скрипта. Синтаксис определения модуля идентичен, за исключением Rx vs rxjs.
Чтобы воспроизвести ошибку, просто создайте Observable.fromEvent (.... и следите за консолью ошибок.
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
It imports with the global object namespace variable of 'Rx'.
Возможно, версия 5.5.6 работает, но последняя версия, которую вы пытаетесь использовать, 6.2.2, не работает. Объект, который он экспортирует в глобальное пространство имен, называется rxjs. Если вы загрузите https://unpkg.com/rxjs/bundles/rxjs.umd.js в браузере, вы увидите это в источнике в определении модуля UMD:
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory):
(factory((global.rxjs = global.rxjs || {})));
}(this, (function (exports) { 'use strict'; // etc
Если вы хотите использовать fromEvent, вы можете сделать это через rxjs.fromEvent.
Недавно комплект UMD был переименован в
rxjs, см. https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911fe563068b8126098588db98a84Если вы хотите использовать RxJS 6, вам необходимо переключиться на «конвейерные» операторы (и функции создания), см. https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-pipe-syntax
Так, например, это работает:
<script src = "https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script>
rxjs.fromEvent(document, 'click').subscribe(console.info);
</script>
Демо: https://stackblitz.com/edit/rxjs6-demo-r2rtbz?file=index.html
Все время проблема была в трубопроводе. Я чувствую, что на всякий случай должен просто пропустить все по трубке :) Спасибо за нюанс возможной обвязки, без этого намека я бы все равно хорошенько разбил бы голову по клавиатуре.
Вот пример после правильного импорта, обратите внимание на канал.
submission = rxjs.fromEvent($('#mybutton'), 'click')
.pipe(rxjs.operators.map((event) => {
return "something"
}));
Я могу переименовать глобальные переменные в «r» и «ro», чтобы избежать новой многословности.
Также бонусные баллы, если кто-то может указать на обработку ошибок конвейера в 6.0!
Вот единственная инструкция по импорту модулей UMD с использованием модулей браузера и динамического импорта в 2020 году.
export default async (url, module = {exports:{}}) =>
(Function('module', 'exports', await (await fetch(url)).text()).call(module, module, module.exports), module).exports
Пример использования:
const ednToJS = await importUMD(`https://unpkg.com/[email protected]/dist/main.js`)
const rxjs = await importUMD('https://unpkg.com/[email protected]/bundles/rxjs.umd.js')
тада
Спасибо, действительно я знал об этом, это было замечено в файле. Я фактически перешел на rxjs.fromEvent (), но та же ошибка возникала тогда при вызове карты, поэтому на самом деле проблема заключалась в переходе на новый синтаксис конвейера.