typescript - 如何修复 '0x800a1391 - JavaScript runtime error: ' require'is undefined'？

Question

我是一名 C# 开发人员，几乎没有尝试学习 Typescript 的网络经验。我正在为这个错误消息敲我的头。

0x800a1391 - JavaScript runtime error: 'require' is undefined

简而言之，我构建了一个带有 Typescript 代码的 Html 应用程序。我使用 VS2015 作为我的 IDE。除了我的项目中的 app.ts 和 index.html 之外，我还有 5 个 Typescript 文件，每个文件只包含一个类(这是我的 C# 遗产)。

在 app.ts 中，我尝试在 window.onload Javascript 事件中实例化一个类。在 window.onload 的正上方，我尝试导入我的一个类。

import {ClassA} from "./ClassA.ts";

window.onload = () => {

    var cls = new ClassA();
    cls.doSomething();
};

当我尝试运行此代码时，我在有关导入语句的问题中收到了错误消息。凭借对 Typescript 的非常基本的了解，我尝试了:

1. 将每个类导出为自己的模块。它没有用。

2. 在 app.ts 的顶部添加以下路径。它没有用。

   ///<reference path="require.d.ts" />
   ///<reference path="jquery.d.ts" />
   ///<reference path="node.d.ts" />
   

我很确定这是一个没有 Typescript 经验的人犯的新手错误。有人知道如何解决这个问题吗？

谢谢

Answer 1

如果你正在为 web 构建，你要么需要使用其他工具来解析模块(webpack、browserify 等)，要么不使用模块。

如果您使用编译器选项 outFile 和 "module": "none"，您将获得一个没有模块的文件，可以直接在浏览器中运行。

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "none",
    "outFile": "./lib/out.js"
  }
}

ClassA.ts(无导出)

class ClassA {
    // stuff
}

app.ts(无导入)

///<reference path="./ClassA.ts" />

window.onload = () => {

    var cls = new ClassA();
}

这将转换为:

var ClassA = /** @class */ (function () {
    function ClassA() {
    }
    return ClassA;
}());
///<reference path="./ClassA.ts" />
window.onload = function () {
    var cls = new ClassA();
};