带有 TypeScript 的 RxJs：如何为 Web 生成生产文件？答案

【问题标题】：RxJs with TypeScript: How generate Production files for Web?带有 TypeScript 的 RxJs：如何为 Web 生成生产文件？
【发布时间】：2017-01-31 08:13:50
【问题描述】：

我想使用 RxJs (5.0.0-Beta.6) 和 TypeScript (1.8.10) 创建一个 JS Lib >.

我的简单 TypeScript 文件正在编译。我有这些文件：

MyLib.ts：

/// <reference path="../../typings/globals/es6-shim/index.d.ts" />
import * as Rx from 'rxjs/Rx';
Rx.Observable.of('foo', 'bar');

tsconfig.json：

{
    "compilerOptions": {
         "module": "commonjs"
        ,"target": "es5"
        ,"sourceMap": true
    },
    "files": [
         "src/MyLib.ts"
    ]
}

我正在使用 gulp-typescript 来生成 JS 文件，它会生成这个文件：

MyLib.js：

"use strict";
var Rx=require("rxjs/Rx");
Rx.Observable.of("foo","bar");

现在我需要在 HTML 中保存这个文件。 RxJs 需要依赖，所以我复制了这些：

RxJs 5.0.0 Beta 6 >> node_modules/rxjs/bundles/Rx.min.js
SystemJS 0.19.38 >> node_modules/systemjs/dist/system.js
RequireJS 2.3.2 >> node_modules/requirejs/require.js

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>MyLib Test</title>

    <script src="vendor/require.js"></script>
    <script src="vendor/system.js"></script>
    <script src="vendor/Rx.min.js"></script>
    <script src="MyLib.js"></script>

</head>
<body>

</body>
</html>

我的问题：

我在 Chrome 控制台中收到此错误：

未捕获的错误：尚未为上下文加载模块名称“rxjs/Rx”：_。使用 require([])

我无法加载这个简单的 JS：MyLib.js 用 RxJs 和 TypeScript 制作。

我的问题是什么，我该如何解决？

【问题讨论】：

标签： javascript typescript rxjs typescript1.8 rxjs5

【解决方案1】：

您忘记配置模块加载器（出于某种原因，包括其中的两个（require 和 systemjs））。

你应该只留下一个，你的带有 systemjs 的 html 看起来有点类似于：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyLib Test</title>
    <script src="vendor/system.js"></script>
    <script>
        System.config({
            paths: {
                "rxjs": 'vendor/rx/dist/rx.min'
            }    
        });

        System.defaultJSExtensions = true;

        //This will bootstrap your app
        System.import('myLib').catch(function(e)
        {
            console.error(e);
        });;
    </script>
</head>
<body>

</body>
</html>

希望这会有所帮助。

【讨论】：