Angular2为什么我们需要es6-shim

Question

遵循Angular2快速入门指南,我们被指示包括es6-shim2个地方:

1) index.html

<script src="node_modules/es6-shim/es6-shim.min.js"></script>

2) typings.json

"ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}

我的印象是我们正在编写es6代码es5.

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    ...

如果最终结果是浏览器正在加载es5,为什么浏览器需要垫片es6？

Answer 1

编辑器使用键入来为您提供代码提示/智能感知,并且es6-shim.min.js是为ES5浏览器模拟ES6功能的代码.其中的一些功能Promise,Array.from()...

当您的代码转换为ES5时,您需要包含es6-shim以便可以在其中使用这些新功能...请考虑以下ES6代码:

let test1 = () => 123 + 456;
let test2 = new Promise((resolve, reject ) => {});

它将被翻译成ES5代码:

var test1 = function () { return 123 + 456; };
var test2 = new Promise(function (resolve, reject) { });

但没有es6-shim 承诺将是未定义的......

Answer 2

TypeScript没有内置的polyfill.它有一些不易改变的特征,这就是像polyfills这样的地方es-shim.

TypeScript定义文件将为您提供所选编辑器中的键入支持,es-shim并将提供TypeScript不会转换为ES5代码的功能的实现.

TypeScript没有透露的一些功能是:

• 承诺
• 功能挂原型对象(Array.from(),Array.of(),Number.isInteger()等)
• 模块加载

一般方法是:

经验法则是,如果有一个没有巨大冲击力的规范/合理的发射,我们将尝试支持它.我们不添加任何运行时方法或数据结构,这更像是core.js (或任何pollyfil)所做的事情.- source(TypeScript开发人员)