如何在HTML页面通过Require.JS正确获取RxJs引用？

我尝试在不使用Angular或Webpack的HTML页面中结合Require.JS使用RxJs，测试代码如下：

<script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"></script>
<script type="text/javascript">
require.config({
  paths: {
      "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"
  }
});
require (['rxjs'], (x) => x.of(1,2,3,4,5).subscribe(console.log));
//-- before this line all working fine

var rxjs_1 = require (['rxjs'], (x) => x);
rxjs_1.of(6,7,8,9,10).subscribe(console.log);
....
</script>

第一种方式可正常运行，控制台能输出1、2、3、4、5，但我不想改写大量代码，希望将RxJs引用存入变量rxjs_1后直接使用。目前rxjs_1仅获取到function localRequire(deps, callback, errback)引用，而非RxJs和Observable对象，调用of()方法时显示undefined。请问我的代码缺少什么？

解决方案 #

问题根源 #

RequireJS是异步模块加载器，require(['模块名'], 回调函数)的返回值并不是模块本身，而是RequireJS的localRequire函数——这就是你看到rxjs_1是函数的原因。模块的实际内容只会在回调函数中被传入，不能通过直接赋值的方式同步获取。

正确实现方式 #

方式1：在回调中保存RxJS到全局变量（推荐）

把RxJS实例挂载到全局window对象上，后续代码就可以直接调用：

require.config({
  paths: {
      "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"
  }
});

// 加载RxJS并保存到全局变量
require(['rxjs'], function(rxjs) {
  window.rxjs_1 = rxjs;
  // 回调内可直接使用
  rxjs_1.of(6,7,8,9,10).subscribe(console.log);
});

// 若后续代码要使用rxjs_1，需确保在RxJS加载完成后执行，比如统一放进上述回调内，避免异步时序问题

方式2：使用RequireJS的同步加载（不推荐）

RequireJS提供了同步加载的方式，但会阻塞页面渲染，仅适合特殊场景：

require.config({
  paths: {
      "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"
  }
});

// 先异步加载一次模块，确保模块已被缓存
require(['rxjs'], function() {});

// 等待模块缓存后，使用同步require获取（参数为字符串而非数组）
var rxjs_1 = require('rxjs');
rxjs_1.of(6,7,8,9,10).subscribe(console.log);

注意：这种方式必须确保模块已经被加载过（即已缓存），否则会抛出错误，因此并不推荐在生产环境使用。

内容的提问来源于stack exchange，提问作者Viacheslav