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);

编辑：我现在检查过，当我试图调用它们时，没有定义任何功能。

Answer 1

我发现您的代码存在两个问题。一个是您正在使用捆绑包，但您的代码忽略了这一点。其次，你没有从你的模块中获得Sensor课程，而是从全球空间获得它。

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

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

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

然后，为您的模块生成的代码将Sensor类导出为模块上的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的回调的参数列表，并将该类称为sensor.Sensor。

SystemJS的ReferenceError

1 个答案: