SystemJS 的参考错误

Question

我使用 SystemJS 作为模块系统来编译我的 TypeScript 文件，但是每当我在浏览器中加载页面时（通过 live-server），我都会收到以下错误：

ReferenceError: Sensor is not defined
    at (index):17
    at <anonymous>

这是我的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sensor</title>
</head>
<body>

    <input type="text" id="textField"/> 
    <p id="text"></p>

    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
        SystemJS.import('dist/index.js').then( function() {
            var textField = new Sensor(document.getElementById('textField')).setName('textField');
        }).catch(function(err) { console.log(err); });
    </script>
</body>
</html>

这是我的 tsconfig.json 文件：

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "system",
        "target": "es5",
        "outFile": "dist/index.js"
    },
    "files": [
        "./src/sensor.ts",
        "./src/signal.ts",
        "./src/signal_receiver.ts"
    ]
}

我检查了输出文件，它看起来像 Sensor 是定义的：

System.register("sensor", ["signal", "signal_receiver"], function (exports_3, context_3) {
    ...
    exports_3("Sensor", Sensor);

编辑： 我现在检查了 none 个函数，当我尝试调用它们时定义了它们。

Answer 1

我发现您的代码有两个问题。一个是你正在使用一个包，但你的代码忽略了它。其次是您没有从模块中获取 Sensor class，而是从全局 space.

中获取它

在 tsc 生成的代码中，对 System.register 的调用的第一个参数是 "sensor"，这意味着您正在处理一个包。这种调用硬编码了模块名，这里的模块名是"sensor"。 SystemJS 包可以使用 script 元素加载，因此您可以在加载 SystemJS 后添加它：

<script src="dist/index.js"></script>

这将加载整个包并使其中的所有模块可供使用。

然后为您的模块生成的代码将 Sensor class 导出为模块上的 Sensor 字段。（代码exports_3("Sensor", Sensor)就是干这个的）所以在使用的时候需要从模块中获取。所以代码应该是：

SystemJS.import('sensor').then(function(sensor) {
  var textField = new sensor.Sensor(document.getElementById('textField')).setName('textField');
}).catch(function(err) { console.log(err); });

在此代码中，我要求 SystemJS 加载名为 "sensor" 的模块，该模块与 System.register 使用的名称相同，并且我已将 sensor 添加到参数中传递给 .then 的回调列表，并将 class 称为 sensor.Sensor。

SystemJS 的参考错误

ReferenceError with SystemJS

javascript

typescript

systemjs