对 TypeScript 使用“require(...)”的方式感到困惑答案

【问题标题】：Confused by the way TypeScript uses "require(...)"对 TypeScript 使用“require(...)”的方式感到困惑
【发布时间】：2016-03-03 10:21:40
【问题描述】：

我已经尝试阅读几篇博客文章，但 TypeScript 模块仍然让我完全困惑。特别是，我使用了 3 个不同的模块（全部通过 npm 安装），每个模块似乎都表现出完全不同的行为：

(1) 我可以在我的 .ts 中像这样从 npm 导入和使用 Angular 2：

import {bootstrap, Component, Directive, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

然后在我的 html 中我有：

<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

这有以下结果：

TypeScript 编译器知道在 node_modules 下查找 angular2.d.ts 文件，尽管我刚才说的是“angular2/angular2”
TypeScript 编译器将 "var angular2_1 = require('angular2/angular2'); 添加到输出 JavaScript 中
尽管存在require，但浏览器不会再次尝试加载angular 2 JavaScript，它以某种方式知道它已经通过脚本标签中的“angular2.dev.js”加载了它

(2) npm D3 模块没有打字稿定义，但我可以从DefinitelyTyped 下载一个，然后通过放置使用它：

/// <reference path="../../typings/tsd.d.ts" />

在我的 .ts 顶部。和

<script src="../node_modules/d3/d3.js"></script>

在我的 html 中。作为一个老式模块，它似乎不需要 import 语句，只要我把它留在这里，输出 JavaScript 就可以正常工作。如果我确实尝试在参考行之后立即使用导入语句：

import * as d3 from 'd3';

然后与 Angular2 一样，它现在添加：

var d3 = require('d3');

到输出JavaScript。但是，与 Angular 案例不同的是，它没有意识到它已经通过 script 标签加载了 JavaScript，因此浏览器尝试从与 html 文件相同的目录中加载一个简单称为“d3”的文件，但失败了。

(3) npm Phaser 模块确实包含一个 .d.ts 文件，位于 npm 模块的“typescript”子目录中。这是一个旧式模块（“declare module Phaser”），所以我似乎不需要使用“import..”语法，而只需：

/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>

在我的 .ts 文件的顶部，与 D3 示例一样。 TypeScript 编译器很高兴，但与 D3 示例不同，在某些情况下（我还没有完全弄清楚，似乎并不总是发生）它会输出：

var phaser_1 = require('phaser');

在 JavaScript 中，即使我没有使用 import 语句。我什至没有在我的 Phaser 项目中使用 commonjs/requirejs，所以甚至没有定义“require”，导致失败。

为了完整起见，与 Angular 或 D3 示例不同，如果我尝试在参考行之后放置一个 import 语句：

import * as Phaser from 'Phaser';

即使是 TypeScript 编译器也不满意。也许在 D3 示例中，TypeScript 编译器正在以特殊方式处理来自 distinctlyTyped 的 tsd.json 或 typings 文件夹，或者可能有其他原因导入为 D3 而不是为 Phaser 编译。

我有各种各样的问题：

1) 什么决定了 TypeScript 编译器是否在输出的 JavaScript 中包含“require(...)”行？

2) TypeScript 编译器在什么情况下知道在使用“import”时在“npm_modules”中哪里可以找到外部模块，无论是否需要在文件顶部添加引用行？

3) TypeScript 编译器在什么情况下知道在使用“import”时在“typings”中的何处找到环境模块，文件顶部有或没有“reference”行？

4) TypeScript 编译器在什么情况下知道在使用“import”时在“npm_modules”中的何处找到环境模块，文件顶部有或没有“reference”行？？

5) 可能是 commonjs/requirejs 问题而不是 typescript 问题，但是如果 TypeScript 编译器确实在 JavaScript 中输出了“require”行，如果 JavaScript 模块的源不是用 ES6 设置的怎么办模块导出？

【问题讨论】：

【解决方案1】：

1 ) 我可以在我的 .ts 中像这样从 npm 导入和使用 Angular 2：

这是因为

npm D3 模块失败 && 移相器模块在运行时失败

它们没有你从 angular2.dev.js 获得的魔力。使用 webpack 或 browserify 之类的东西来提供这种魔力。

与 Angular 或 D3 示例不同，如果我尝试在参考行之后放置一个导入语句：import * as Phaser from 'Phaser';

这是因为Phaser 定义的声明方式。显然它缺少 declare module "Phaser"，这是 d3 see here 和 angular 提供的。

【讨论】：