奇怪的打字稿/angular2 导入行为

Question

我正在尝试为另一个 SO 问题创建演示，首先使用 angular-cli，然后使用 punker。

我在两个版本的 import 中遇到了一个奇怪的行为差异。

问题出在以下代码的第二个 import 中：

moment.service.ts

import { Injectable } from '@angular/core';

// Following work in plunker setup
import m from 'moment';
// Following work in angular-cli setup
//import * as m from 'moment';

@Injectable()
export class MomentService {
  moment = m;
}

在angular-cli代码中，我必须使用：

import * as m from 'moment';

如果我使用 punker 设置，无论是在 punker 还是运行本地服务器，我都必须关注，否则它不会运行在浏览器中：

import m from 'moment';

谁能解释一下行为上的差异？？

笨蛋：Link

Github：plunker code local version（包括 server.js 在本地服务）

Github: angular-cli version

Answer 1

TL:DR 每个演示都使用不同的模块格式。在 plunker 中，整个模块被视为默认导出。在cli项目中，没有默认导出。

每个演示都使用不同的模块格式。 plunker 没有指定格式，我不确定 systemjs 默认使用什么格式，但我不相信它是 ES6。 CLI 项目正在使用 ES6 模块格式。

如果你看一下 here，你会看到当模块格式为 AMD、commonjs 或 global 时，它将导出整个模块作为默认导出。 ES6 模块不会发生这种情况，您需要显式定义默认导出，而 momentjs 不会。

因此，在 plunker 演示中，import m from 'moment' 有效，因为您的配置告诉 systemjs 和 typescript 在存在 none 时将整个模块视为默认导出。由于 CLI 项目中的配置，该模块未被视为默认导出，因此您必须使用 import * as m from 'moment' 表示从命名空间 'm'.

下的时刻导入所有命名导出

Here is a discussion on TypeScript's repo regarding this

奇怪的打字稿/angular2 导入行为

Strange typescript / angular2 import behavior

typescript

systemjs

angular-cli

angular