Angular2爲什麼我們需要ES6-墊片

Question

下面我們指示Angular2 Quickstart Guide包括es6-shim在兩個地方：

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

您的編輯器使用類型爲您提供代碼提示/ intellisense，並且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不帶有內置的polyfills。有一些功能不transpile，這是像es-shim polyfills進來了。

打字稿定義文件將爲您提供您所選擇的編輯器中輸入的支持和es-shim將爲在打字稿沒有按該功能的實現不會轉換成ES5代碼。

一些這樣的特徵打字稿的不transpile是：

• 承諾
• 功能掛原型對象（Array.from()，Array.of()，Number.isInteger()等）
• 模塊加載的

一般方法是：

經驗法則是，如果有一個沒有巨大perf-hit的規範/理智發射，我們會嘗試支持它。我們不添加任何運行時方法或數據結構，這更多的是core.js （或任何pollyfil）所要做的。 - source (TypeScript developer)