Question

版本

npm: 3.10.9
systemjs: 0.19.41
typescript: 1.8.10
rxjs: 5.0.3

背景

我有一个项目（用打字稿编写），我正在尝试添加rxjs，但在通过systemjs加载捆绑文件时遇到了问题。

SystemJs config

System.config({
    transpiler: 'typescript',
    paths: {
        'src:*': '/src/*',
        'npm:*': '/node_modules/*'
    },
    map: {
        'lib': 'src:lib',
        'rxjs': 'npm:rxjs/bundles/Rx.js',
        'typescript': 'npm:typescript/lib/typescript.js',
        'systemjs': 'npm:systemjs/dist/system.src.js'
    },
    packages: {
        lib: {
            defaultExtension: 'js'
        }
    }
});

问题

使用上面的配置，我收到以下错误。

Error: (SystemJS) undefined is not a constructor (evaluating '__extends(UnsubscriptionError, _super)')

这是由于systemjs错误地默认为amd格式并且exporter的第245行上的Rx.js函数永远不会被执行而引起的。

来自systemjs docs：

模块格式检测

未设置模块格式时，使用基于自动正则表达式的检测。这种模块格式检测永远不会完全准确，但适合大多数用例。

尝试解决方案

我认为在配置中明确将rxjs包格式设置为global可以解决此问题。

System.config({
    transpiler: 'typescript',
    paths: {
        'src:*': '/src/*',
        'npm:*': '/node_modules/*'
    },
    map: {
        'lib': 'src:lib',
        'rxjs': 'npm:rxjs/bundles/Rx.js',
        'typescript': 'npm:typescript/lib/typescript.js',
        'systemjs': 'npm:systemjs/dist/system.src.js'
    },
    packages: {
        lib: {
            defaultExtension: 'js'
        },
        rxjs: {
            format: 'global'
        }
    }
});

问题2

虽然这解决了第一个问题，但它创造了第二个问题。因为我尝试使用rxjs导入的所有地方现在都会抛出错误，因为它们是undefined。

import {Observable} from 'rxjs'

export class SomeClass {

    ...

    private _isObservable(arg: any): boolean {
        return arg instanceof Observable;
    }
}

Uncaught TypeError: Right-hand side of 'instanceof' is not an object at SomeClass._isObservable

在控制台中调试转换后的代码显示虽然window.Rx被正确设置为Rx对象，但rxjs_1_1上设置的SomeClass对象不是全局Rx对象，而是另一个将Rx全局设置为属性'Rx'的对象。

所以rxjs_1.Rx.Observable有效，但不适用于rxjs_1.Observable`。

(function(System, SystemJS) {System.register(['rxjs'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var rxjs_1;
var SomeClass;
return {
    setters:[
        function (rxjs_1_1) {
            rxjs_1 = rxjs_1_1;
        }],
    execute: function() {
        SomeClass = (function () {
            function SomeClass() {
            }
            ...
            SomeClass.prototype._isObservable = function (arg) {
                return arg instanceof rxjs_1.Observable;
            };
            return SomeClass;
        }());
        exports_1("SomeClass", SomeClass);
    }
}

}）;

问题

我知道如何通过Rx对象传递它吗？

Answer 1

通过在'Rx'中添加meta.rxjs.exports作为system.config值，它允许您选择要导入的Rx对象，而不是其父对象。如有必要，您可以使用点表示法选择更深的对象。

不是您想要的，但仅作为示例，exports: 'Rx.Observable'会将我的原始问题中的属性rxjs_1_1设置为Observable。

所以完整的system.config将是：

System.config({
    transpiler: 'typescript',
    paths: {
        'src:*': '/src/*',
        'npm:*': '/node_modules/*'
    },
    map: {
        'lib': 'src:lib',
        'rxjs': 'npm:rxjs/bundles/Rx.js',
        'typescript': 'npm:typescript/lib/typescript.js',
        'systemjs': 'npm:systemjs/dist/system.src.js'
    },
    packages: {
        lib: {
            defaultExtension: 'js'
        }
    },
    meta: {
        rxjs: {
            format: 'global',
            exports: 'Rx'
        }
    }
});

使用SystemJs

1 个答案: