Question

我将在序言中说我没有TypeScript或JavaScript的高级知识。

我做了什么

我正在制作一个准分子TypeScript“算法玩具盒”，它实现了算法（Brassard和Bratley）基础算法。我所做的是打开一个本地HTML文件，转换后的TypeScript修改DOM以显示输出（就像TypeScript网页上的Greeter example一样）。

在我决定为每个班级使用单独的文件之前，一切都很顺利。我使用one of the many种方法来引用TypeScript文件，但我不确定它是否最合适。我还使用Atom TypeScript插件创建了一个默认的tsconfig.json文件，认为编译器现在假设目录中的所有.ts都是相同的模块或者什么，但我想情况并非如此。< / p>

main.ts：

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

let arr5_13 = [1,6,9,2,7,5,2,7,4,10]
let mon1 = new Monticulo(arr5_13)
// ...

document.body.innerHTML = mon1.console_debug

问题

当我在浏览器上打开HTML文件时，控制台会显示Uncaught ReferenceError: require is not defined。

果然，转换后的代码有一个require（）调用：

main.js：

var monticulo_ts_1 = require("./stuff/monticulo.ts");
var arr5_13 = [1, 6, 9, 2, 7, 5, 2, 7, 4, 10];
// ...

document.body.innerHTML = mon1.console_debug;

我尝试了什么

我最初在Firefox 47.0上运行它，然后我尝试在Chromium 51.0中运行（如果它与浏览器相关）但我得到了同样的错误。为了完整起见，我在Ubuntu 16.04上。

需要（）的

I've read是一个未在客户端实现的函数，但Node实现了它，并且在浏览器中使用npm模块需要它，但为什么TypeScript需要调用任何npm模块？ 为什么 main.js 只引用已编译的.js而不是.ts本身？我很确定我错过了一个或更多信息。

Answer 1

您可能正在编译为commonJS模块格式（请检查您的tsconfig.json）

这意味着它为您生成require函数调用，您有责任提供commonjs加载器。您可能还想将所有文件捆绑到一个文件中。它恰好发生在webpack中，并且经常与typescript一起使用：）

Answer 2

您可以通过替换

来消除对require的需求

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

带

/// <reference path="./stuff/monticulo.ts" />
/// <reference path="./programacion-dinamica.ts" />

有关使用三重斜杠导入的详细信息，请参阅Triple Slashes。

您还需要删除所有export class并仅使用public class替换。

如何引用TypeScript文件而不会遇到“require is not defined”错误

我做了什么

问题

我尝试了什么

2 个答案: