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

Question

我已经尝试阅读几篇博文，但 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 模块没有 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，因此浏览器尝试从与 html 文件相同的目录加载名为“d3”的文件，但失败了。

(3) npm Phaser 模块在 npm 模块的“typescript”子目录中包含一个 .d.ts 文件。这是一个旧式模块(“声明模块 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 编译器正在以特殊方式处理 DefinitelyTyped 中的 tsd.json 或 typings 文件夹，或者可能有一些其他原因为 D3 而不是 Phaser 编译导入。

我有各种各样的问题:

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

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

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

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

5) 也许是 commonjs/requirejs 问题而不是 typescript 问题，但是如果 TypeScript 编译器确实在 JavaScript 中输出了“require”行，那么如果 JavaScript 模块的源代码没有使用 ES6 设置，你会怎么做模块导出？

Answer 1

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 提供的。和角度。