20

现在所有现代浏览器都支持 javascript 模块，我正在 import浏览器中试用代码。我们可以从unpkg.comnpm获取模块，我找到了jspm项目，它将模块包装成浏览器可以使用的格式。npm

但是我仍然遇到问题，尤其是RxJS。从版本 6 开始，RxJS 建议您像这样导入构造函数和运算符：

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

但是如果我尝试在浏览器中这样做：

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/operators';

我收到以下错误：

未捕获的语法错误：请求的模块“ https://dev.jspm.io/rxjs@6/operators ”不提供名为“map”的导出

我可以通过导入整个rxjs模块并梳理出我需要的东西来解决它，就像我使用 CDN 一样：

import rxjs from 'https://dev.jspm.io/rxjs@6';
const { Observable } = rxjs;
import operators from 'https://dev.jspm.io/rxjs@6/operators';
const { map } = operators;

但这破坏了 Rx 团队为减少最终捆绑包大小等所做的努力。

我确信这不仅仅是一个 RxJS 问题。

为了让我们的开发 javascript（直接导入浏览器）看起来像我们最终想要传递给捆绑器的东西，这里的解决方案是什么？

4

2 回答 2

15

这是一个简单的 rxjs 入门示例 stackblitz：

简而言之：

确保您有一个脚本来添加 rxjs js 文件（例如来自 CDN）

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

一切都在 rxjs 命名空间下导入，所以一个简单的示例用法：

rxjs.of(1, 2, 3)
  .subscribe(x => {
    const element = document.createElement('div');
    element.innerText = 'Data: ' + x;
    document.body.appendChild(element)
  },
  err => { },
  () => {
    const element = document.createElement('div');
    element.innerText = 'All done';
    document.body.appendChild(element)
  });
于 2018-05-13T03:11:28.850 回答
12

es6 模块导出语法位于子文件夹_esm2015中。所以你需要导入：

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

遗憾的是，您不能只在浏览器中安装rxjs ，因为分发源缺少语句中的文件扩展名： https ://unpkg.com/@reactivex/rxjs@6.3.3/dist/esm2015/index .js。npm install rxjs@6import.jsimport

但是浏览器需要import（目前）的文件扩展名：（https://developers.google.com/web/fundamentals/primers/modules#specifiers）：

// Not supported (yet):
import {shout} from 'jquery';
import {shout} from 'lib.mjs';
import {shout} from 'modules/lib.mjs';

// Supported:
import {shout} from './lib.mjs';
import {shout} from '../lib.mjs';
import {shout} from '/modules/lib.mjs';
import {shout} from 'https://simple.example/modules/lib.mjs';

这也有一个问题：https ://github.com/ReactiveX/rxjs/issues/4416 。

现在，您必须依赖https://jspm.io或制作自己的捆绑包（例如，@Ovidiu Dolha 建议使用汇总）。

于 2019-01-06T12:45:37.413 回答