TypeScript编译后无需Angular/Webpack在浏览器直接导入RxJS模块的方法

我的RxJS代码在Node环境可正常运行，TypeScript编译后的Script.js开头代码如下：

Object.defineProperty(exports, "__esModule", { value: true });
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
...

为了在浏览器中运行，我先添加了<script>var exports = {};</script>，随后配置RequireJS并验证其可正常加载jQuery，但将Script.js中的require()改为require[]后，浏览器提示Uncaught TypeError: rxjs_1 is undefined，RxJS模块未成功加载，求正确加载RxJS核心及Operators模块的方法。

核心问题分析 #

你将require()改为require[]是错误用法，RequireJS的异步加载语法为require([模块名], 回调函数)，而非数组索引调用方式。此外，RxJS的UMD包结构与Node模块不同，需调整配置和加载逻辑。

正确解决方案 #

1. 修正RequireJS配置 #

RxJS的UMD包中，核心模块与Operators属于同一包的不同导出分支，无需单独配置rxjs/operators路径，修改配置如下：

<script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script type="text/javascript">
    require.config({
      paths: {
          "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min"
      }
    });
</script>

2. 用RequireJS异步加载语法执行RxJS代码 #

不要手动修改编译后的Script.js中的require语法，而是通过RequireJS的回调函数加载RxJS后再执行业务代码：

<script type="text/javascript">
    require(["rxjs"], function(rxjs) {
        // 从rxjs.operators中解构需要的操作符
        const { map, filter } = rxjs.operators;
        
        // 示例RxJS业务逻辑
        rxjs.interval(1000)
            .pipe(
                filter(x => x % 2 === 0),
                map(x => x * 2)
            )
            .subscribe(x => console.log(x));
    });
</script>

3. 适配TypeScript编译配置（可选） #

若不想修改编译后的代码，可调整tsconfig.json让TypeScript直接生成适配RequireJS的AMD规范代码：

{
  "compilerOptions": {
    "module": "amd",
    "outFile": "Script.js"
  }
}

编译完成后，直接通过RequireJS加载你的模块即可：

<script type="text/javascript">
    require(["Script"], function(yourModule) {
        // 调用模块导出的方法
        yourModule.yourExportedFunction();
    });
</script>

4. 移除不必要的全局变量 #

之前添加的<script>var exports = {};</script>可直接删除，AMD模块会自行处理导出逻辑，无需全局exports变量。

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