javascript - Visual Studio 2015 Update 2 中的 TypeScript 模块 - 'require' 未定义

Question

在 Visual Studio 2015 Enterprise(已安装更新 2)中，我从模板创建了一个新的 TypeScript-Project TypeScriptHTMLApp1(使用默认项目设置)。之后，我创建了新的 TypeScript 文件 log.ts 并从 https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#11.3 复制了示例代码。到新创建的文件。

// -------- log.ts --------  
export function message(s: string) {  
    console.log(s);  
}

接下来，我将以下代码行复制到 app.ts 文件的开头。

// -------- app.ts --------  
import { message } from "./log";    
message("hello");

class Greeter {
    element: HTMLElement;

当我尝试在 Internet Explorer 中(从 Microsoft Visual Studio IDE 内部)运行此项目时，我收到以下错误消息:

Unhandled exception at line2, column 1 in http://localhost:20728/app.js
0x800a1391 - JavaScript runtime error: 'require' is undefined

Answer 1

您需要包含 requirejs或将您的脚本与 webpack 捆绑在一起。 TypeScript 提供模块语法并编译为 require 调用，但不提供运行时模块加载器。您必须将其包含在页面中才能使脚本正常工作。

在浏览器中，确保提供 --module flag并指定您正在使用的模块的类型。对于通过 webpack 运行的代码，通常为 es6；对于使用 requirejs 的旧代码，通常为 amd/umd。

如果您查看 TS 编译器的输出，您会发现

import {foo} from './bar';

变成了

define(["require", "exports"], function (require, exports) {
    "use strict";
});

但请注意，define 以及模块 "require" 和 "exports" 未定义>由编译器。

如果您在节点环境中运行，则nodejs运行时为 commonjs module 提供必要的功能。正在加载。