如何在不遇到“需要未定义”错误的情况下引用 TypeScript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38530915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reference TypeScript files without running into 'require is not defined' error
提问by JoseHdez_2
I'll preface by saying I don't have advanced knowledge of TypeScript or JavaScript.
我先说我没有 TypeScript 或 JavaScript 的高级知识。
What I did
我做了什么
I'm making a barebones TypeScript "algorithmic toy-box" that implements algorithms from Fundamentals of Algorithmics(Brassard and Bratley). What I do is open a local HTML file and the transpiled TypeScript modifies the DOM to show the output (just like the Greeter exampleon the TypeScript webpage).
我正在制作一个准系统 TypeScript“算法玩具盒”，它实现了算法基础（Brassard 和 Bratley）中的算法。我所做的是打开一个本地 HTML 文件，转换后的 TypeScript 修改 DOM 以显示输出（就像TypeScript 网页上的Greeter 示例一样）。
Everything was going fine until I decided to use separate files for each class. I used one of the manyways available to reference TypeScript files, but I'm not sure if it was the best suited. I also created a default tsconfig.jsonfile with the Atom TypeScript plugin thinking that the compiler would now assume all .tsin the directory are the same module or something, but I guess that wasn't the case.
一切都很顺利，直到我决定为每个类使用单独的文件。我使用了多种可用于引用 TypeScript 文件的方法之一，但我不确定它是否最适合。我还tsconfig.json使用 Atom TypeScript 插件创建了一个默认文件，认为编译器现在会假设.ts目录中的所有内容都是相同的模块或其他内容，但我想情况并非如此。
main.ts:
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
The problem
问题
When I open the HTML file on a browser, the console says Uncaught ReferenceError: require is not defined.
当我在浏览器上打开 HTML 文件时，控制台显示Uncaught ReferenceError: require is not defined.
Sure enough, the transpiled code has a require() call:
果然，转译后的代码有一个 require() 调用：
main.js:
主要.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;
What I've tried
我试过的
I initially ran it on Firefox 47.0, then I tried running in Chromium 51.0 (in case it was browser related) but I got the same error. I'm on Ubuntu 16.04 for the sake of completeness.
我最初在 Firefox 47.0 上运行它，然后我尝试在 Chromium 51.0 中运行（以防它与浏览器相关）但我遇到了同样的错误。为了完整起见，我使用的是 Ubuntu 16.04。
I've readthat require() is a function that is not implemented client-side, yet Node has it implemented and it's needed for using npm modules in-browser, but why would TypeScript need to call any npm module? Why doesn't main.jsjust reference the transpiled .jsinstead of the .tsitself?I'm pretty sure I'm missing one or more pieces of information.
我读过require() 是一个没有在客户端实现的函数，但是 Node 已经实现了它并且需要它在浏览器中使用 npm 模块，但是为什么 TypeScript 需要调用任何 npm 模块？为什么main.js不只引用转译的.js而不是.ts它本身？我很确定我遗漏了一条或多条信息。
采纳答案by AlexG
You are probably compiling down to the commonJS module format (check your tsconfig.json)
您可能正在编译为 commonJS 模块格式（检查您的 tsconfig.json）
That means it generates require function calls for you and it is your responsibility to provide a commonjs loader. You also probably want to bundle all your files into one. It just so happens that webpack does both and is very often used together with typescript :)
这意味着它会为您生成 require 函数调用，并且您有责任提供一个 commonjs 加载器。您可能还想将所有文件捆绑在一起。碰巧 webpack 两者兼而有之，并且经常与 typescript 一起使用:)
回答by Brant Olsen
You can remove the need for require by replacing
您可以通过替换来消除对 require 的需求
import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"
with
和
/// <reference path="./stuff/monticulo.ts" />
/// <reference path="./programacion-dinamica.ts" />
See Triple Slashesfor more info on using the triple slash imports.
有关使用三重斜线导入的更多信息，请参阅三重斜线。
You will also want to remove all export classand replace with just public class.
您还需要删除所有内容export class并替换为 just public class。
