Question

我为TypeScript阅读了官方doc，并从那里复制了代码。

我安装了commonjs和requerejs。

"devDependencies": {
  ...
  "commonjs": "latest",
  "requirejs": "latest"
}

但我在浏览器中收到错误：

ReferenceError: require is not defined

是index.html：

<!DOCTYPE html>
<body>
     <script src="main.js"></script>
</body>

编译后是main.js：

"use strict";
var core_1 = require("./some_dir/some_file");
window.onload = function () {
    var some = new some_file_1.SomeClass();
};

Answer 1

浏览器（尚未）了解模块。这意味着当require（）只在节点中执行时，它会起作用，浏览器不知道如何处理它。

有两种主要方法可以解决这个问题：

删除exports/require语句，并将每个js文件（以正确的依赖顺序）包含到html文件中（作为脚本标记）。它们都具有相同的范围，并且就像只有一个大的连接文件一样工作。这个解决方案非常糟糕，因为它会破坏作用域，不能与你使用npm的模块一起工作并且加载时间很短，因为它必须从服务器获取多个js文件。
使用webpack之类的资源捆绑器。 Webpack将查看从main.js文件开始的所有相关文件，并将其压缩并压缩为一个小的.js文件。这也适用于外部依赖项（npm）。您所要做的就是将单个bundle.js文件包含在html中。