对 TypeScript 使用的方式感到困惑 "require(...)"

Confused by the way TypeScript uses "require(...)"

我尝试阅读了几篇博文，但 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>

结果如下：

(2) npm D3 模块没有 typescript 定义，但我可以从 DefinitelyTyped 下载一个，然后通过以下方式使用它：

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

在我的 .ts 的顶部。和

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

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

import * as d3 from 'd3';

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

var d3 = require('d3');

到输出JavaScript。然而，与 Angular 不同的是，它没有意识到它已经通过脚本标签加载了 JavaScript，因此浏览器尝试加载一个名为 "d3" 的文件，但失败了与 html 文件相同的目录，该文件失败。

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

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

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

var phaser_1 = require('phaser');

在 JavaScript 中，即使我没有使用导入语句。我什至没有在我的移相器项目中使用 commonjs/requirejs，所以甚至没有定义 "require"，导致失败。

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

import * as Phaser from 'Phaser';

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

我有各种各样的问题：

1) 什么决定 TypeScript 编译器是否在输出中包含 "require(...)" 行 JavaScript?

2) 在什么情况下，TypeScript 编译器在使用 "import" 时知道在 "npm_modules" 中的何处找到外部模块，无论是否需要在文件顶部添加参考行？

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

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

5) 也许是 commonjs/requirejs 问题而不是 typescript 问题，但是如果 TypeScript 编译器确实在 JavaScript 中输出了 "require" 行，如果源JavaScript 模块没有设置 ES6 模块导出？

1 ) I can import and use Angular 2 from npm like this in my .ts:

这是因为

  • angular2 附带其 .d.ts 文件

  • 由于 angular2.dev.js

    • 中的魔术，浏览器不会尝试读取 require

The npm D3 module fails && the phaser module fails at runtime

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

Unlike with either the Angular or D3 example, if I try putting an import statement after the reference line: import * as Phaser from 'Phaser';

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

提供的