Typescript. ReferenceError: require is not defined

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.

javascript