打字稿。ReferenceError：未定义要求

Question

我阅读了 TypeScript 的官方文档，并从那里复制了代码。

我安装了 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 中。