web-dev-qa-db-ja.com

Angular2なぜes6-shimが必要なのか

Angular2クイックスタートガイド に従って、2つの場所に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のshimを必要とするのはなぜですか？

angulares6-shim
20
Shawn Northrop

エディターはタイピングを使用してコードヒント/インテリセンスを提供し、_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_がなければPromiseは未定義になります...

26
Sasxa

TypeScriptには、ポリフィルが組み込まれていません。トランスパイルしない特定の機能があります。これは_es-shim_のようなポリフィルが入る場所です。

TypeScript定義ファイルは、選択したエディター内でタイピングサポートを提供し、_es-shim_は、TypeScriptがES5コードに変換しない機能の実装を提供します。

TypeScriptがトランスパイルしない機能のいくつかは次のとおりです。

  • 約束
  • プロトタイプオブジェクトからぶら下がっている関数（Array.from()、Array.of()、Number.isInteger()など）
  • モジュールのロード

一般的なアプローチは次のとおりです。

経験則では、巨大なperf-hitを持たない正規の/正常な出力がある場合、それをサポートしようとします。ランタイムメソッドやデータ構造は追加しません。これは、core.js（または任意のpollyfil）が実行する機能です。 - ソース（TypeScript開発者）

13
Joseph Woodward