AngularJS 2.0 编译成 ES6

AngularJS 2.0 compile to ES6

我可以得到 AngularJS 2.0 5 Minute Quickstart working in my IntelliJ IDEA 14.1.4 following this Whosebug Answer regarding AngularJS 2.0 TypeScript Intellij idea (or webstorm) - ES6 import syntax.

然而,这似乎是针对 TypeScriptEcmaScript 5 的编译。

我想看看能否让 AngularJS 2.0 Typescript 编译成 EcmaScript 6

问题 1: 当我将 TypeScript 编译器更改为目标 ES6 ...

我开始收到 TypeScript 编译器错误:

Error: TS1204: Cannot compile modules into 'commonjs', 'amd', 'system', or 'umd' 
when targeting 'ES6' or higher.

我可以通过删除 --module "amd" TypeScript 编译器选项来绕过它。

这确实引出了一个问题:在不指定 amd 的情况下,ES6 使用的是哪种模块格式?

问题 2:

修改 TypeScript 编译器选项后,它们显示如下:

我开始收到有关以下内容的错误:

Error TS2300: Duplicate identifier 'Promise'

有人以前看过这个吗?我怀疑它与指定 ES-6 Promise 的 AngularJS 2.0 Quickstart 和它在全球范围内安装有关,但一直无法弄清楚如何解决它。

非常感谢您。

without specifying amd, what sort of module format is ES6 using?

目标 es6 只允许 systemamd 起作用的事实实际上是一个错误。

Duplicate identifier 'Promise'

目标 es6 lib.d.ts 变为 lib.es6.d.ts (this file),其中包含 Promise 的定义。

建议修复:

更多关于 lib.d.ts http://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html

好的,我已经解决了阻止我将 AngularJS 2.0 快速入门编译成 EcmaScript 6 的问题:

解法:

  1. 正如basarat所说,ES6不支持amd。我确实尝试指定 --module="system" 编译器标志,但这也不起作用,仍然收到错误消息

    错误:TS1204:无法将模块编译成 'commonjs'、'amd'、'system' 或 'umd'(目标为 'ES6' 或更高版本时)。

解决方法是 NOT 指定任何类型的模块。

我的新 TypeScript 编译器选项:

--experimentalDecorators --target "es6" 
  1. 命令 tsd install angular2 es6-promise rx rx-lite 拉下 ES6 承诺,正如人们所期望的那样。问题是 TypeScript 1.5.3bin 中包含一个名为 lib.es6.d.tsTypeScript Definition file

这里包含 Promise 的定义,与通过 tsd 命令下拉的定义冲突。

我从我的 Angular2 项目 typings 文件夹(由 运行 tsd 创建的文件夹)中删除了 es6-promise 目录。

  1. (这感觉像是一个 hack):我进入 angular2.d.ts 文件并删除了以下行:

    ///reference path=<"../es6-promise/es6-promise.d.ts"/>

我必须删除它的原因是 AngularJS 2.0 TypeScript Type Definition 在同等级别寻找 ES6 Promise。由于 TypeScript compiler(至少我正在使用的版本,TypeScript 1.5.3 已经包含 ES6 Promise)并且它们发生冲突。

Angular2 的教程自 Philip 的回答后发生了变化,它不再使用 es6-promise 但我在尝试转换为 es6 时仍然遇到此错误。

诀窍是在使用 es6 时排除浏览器类型。您可以将 "typings/browser", "typings/browser.d.ts", 添加到 tsconfig.js.

中的排除选项

如果您要转译为 es6,请使用:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts",
    "typings/main",
    "typings/main.d.ts"
  ]
}

如果您要转译为 es5,请使用:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

我为此苦苦挣扎了很长时间。我在这里尝试了所有信息但没有运气。我在我的引导文件中引用了类型。

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

其中 typings 具有以下结构

typings -- globals ---- es6-collections ---- es6-promise ---- node

我还完全删除了@type 节点模块。还在 tsconfig.json 文件中尝试各种 'excludes' 和 'types'。没有成功。

经过一番折腾后,我发现如果我只包含 'node' index.d.ts 而不是 'typings' 中的其他内容,它就可以正常工作。

因此

/// <reference path="../../typings/globals/node/index.d.ts" />

在我的 Angular 2 引导文件中为我完成了。