変換babelのpolyfillとruntimeの違い

babel-polyfill使用シーン
Babelのデフォルトでは、新しいJavaScript構文のみが変換され、新しいAPIは変換されません.たとえば、Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promiseなどのグローバルオブジェクト、およびObject.assignなどのグローバルオブジェクトに定義されたメソッドは翻訳されません.これらの新しいオブジェクトと方法を使用するには、babel-polyfillを使用して、現在の環境にスペーサを提供する必要があります.
babel-runtimeシーンの使用
Babel変換後のコードソースコードと同じ機能を実現するには、いくつかのヘルプ関数を使用する必要があります.たとえば、{ [name]: 'JavaScript' }変換後のコードは次のようになります.

'use strict';
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var obj = _defineProperty({}, 'name', 'JavaScript');

上のようなヘルプ関数_definePropertyはいくつかのモジュールに繰り返し表示され、コンパイル後のコード体積が大きくなる可能性があります.Babelはこの問題を解決するために、モジュール多重化ツール関数をコンパイルするための個別のパケットbabel-runtimeを提供する.
プラグインbabel-plugin-transform-runtimeを有効にすると、Babelはbabel-runtimeのツール関数を使用します.

'use strict';
//     _defineProperty            `babel-runtime/helpers/defineProperty`   
var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var obj = (0, _defineProperty3.default)({}, 'name', 'JavaScript');

これに加えて、babelはソースコードの非インスタンスメソッド(Object.assign、インスタンスメソッドはこのような"foobar".includes("foo"))とbabel-runtime/helpsの下のツール関数がpolyfillを自動的に参照する.これにより、グローバルネーミングスペースの汚染を回避でき、JavaScriptライブラリやツールパッケージの実装に適しています.例えばconst obj = {}, Object.assign(obj, { age: 30 });翻訳後のコードは以下のようになります.

'use strict';
//     core-js     assign
var _assign = require('babel-runtime/core-js/object/assign'); var _assign2 = _interopRequireDefault(_assign); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var obj = {}; (0, _assign2.default)(obj, { age: 30 });

思考:babel-runtimeはなぜJavaScriptライブラリとツールパッケージの実装に適しているのか.

babelでコンパイルされたツール関数が各モジュールで繰り返されることを回避し、ライブラリとツールパッケージの体積を減少させる.

babel-runtimeを使用する前に、ライブラリおよびツールパッケージはpolyfillに直接導入されません.そうでなければPromiseのようなグローバルオブジェクトはグローバルネーミングスペースを汚染し、ライブラリの使用者自身にpolyfillを提供する必要があります.これらのpolyfillは、一般的にライブラリおよびツールの使用説明に記載されています.たとえば、多くのライブラリではes 5のpolyfillの提供が要求されています.babel-runtimeを使用すると、ライブラリとツールはpackage.jsonではbabel-runtimeに依存を増やし、babel-runtimeに渡してpolyfillを導入すればいい.

まとめ:

具体的な項目はbabel-polyfillを使用する必要があり、babel-runtimeのみを使用すると、インスタンスメソッドが正常に動作しない(例えば"foobar".includes("foo")).

JavaScriptライブラリとツールはbabel-runtimeを使用することができ、実際のプロジェクトでこれらのライブラリとツールを使用するには、プロジェクト自体がpolyfillを提供する必要があります.

転載先:https://www.cnblogs.com/yudabing/p/7248710.html