RxJs with TypeScript：如何为 Web 生成生产文件？

Question

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

正在编译我的简单 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 测试版 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 制作。

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

Answer 1

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

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

<!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>

希望对您有所帮助。

RxJs with TypeScript：如何为 Web 生成生产文件？

RxJs with TypeScript: How generate Production files for Web?

javascript

rxjs

typescript

rxjs5

typescript1.8