babel-polyfill VS babel-runtime

внешний интерфейс JavaScript Promise Babel
babel-polyfill VS babel-runtime

задний план

В процессе итерации проекта из-за необходимости совместимости с IE используйте его согласно документацииbabel-polyfillа такжеbabel-runtimeДва плагина решают проблему. Но я мало что знаю о обидах и недовольстве между ними двумя, поэтому я планирую изучить это подробно.

О Бабеле

Если мы не настроим некоторые правила, Babel по умолчанию преобразует только новый синтаксис (синтаксис) JavaScript, а не новые API, такие как Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise и другие глобальные объекты, а также некоторые определенные в методах глобального объекта (например, Object.assign ), не перекодируются. Итак, когда появляется такой код:

const key = 'babel'
const obj = {
    [key]: 'foo',
}

Babel по умолчанию скомпилируется в следующий код

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 key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'foo' }));

Мы видим, что есть дополнительный код с именем_definePropertyВспомогательная функция, но эта вспомогательная функция действует только в текущем модуле, поэтому, если тот же синтаксис используется в других модулях, после компиляции будет много повторяющегося кода.

babel-polyfill

Принцип заключается в том, что когда некоторые методы не реализованы в среде выполнения, babel-polyfill сделает их совместимыми. Но у этого есть и недостаток, то есть будут загрязняться глобальные переменные, а объем проекта сильно увеличится после упаковки, потому что весь пакет зависимостей тоже включен. Поэтому не рекомендуется использовать его в некоторых библиотеках классов методов.

Применение

1. `npm install --save babel-polyfill`
2. 在应用的入口引用，以确保它能够最先加载：
`import "babel-polyfill";` 或者
`require("babel-polyfill");`

babel-runtime

Чтобы не загрязнять глобальные объекты и встроенные прототипы объектов, но хочется испытать острые ощущения от использования свежего синтаксиса. можно использовать вместеbabel-runtimeа такжеbabel-plugin-transform-runtime. Например, текущая операционная среда не поддерживаетpromise, который можно ввести, введяbabel-runtime/core-js/promiseполучитьpromise, или черезbabel-plugin-transform-runtimeавтоматически переписать вашpromise. Некоторые люди могут задаться вопросом, почему их два.runtimeНа самом деле существуют исторические причины для плагинов: в начале толькоbabel-runtimeПлагин, но очень неудобный в использовании, да и внедряется прямо в кодhelperфункция, что означает, что ею нельзя поделиться, что приводит к большому количеству повторений в окончательном упакованном файле.helperкод. так,BabelРазработано сноваbabel-plugin-transform-runtime, этот модуль перепишет наш код, напримерPromiseпереписать как_Promise(просто аналогия), затем ввести_Promise helperфункция. Это позволяет избежать повторной упаковки кода и ручного импорта модулей.

Применение

1. `npm install --save-dev babel-plugin-transform-runtime`
2. `npm install --save babel-runtime`
3. 写入 `.babelrc`

{
  "plugins": ["transform-runtime"]
}

Включить плагинbabel-plugin-transform-runtimeназад,Babelбуду использоватьbabel-runtimeФункция инструмента ниже, код перевода выглядит следующим образом:

'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var key = 'babel';
var obj = (0, _defineProperty3.default)({}, key, 'foo');

недостаточный

babel-runtimeМетоды экземпляра нельзя перекодировать, например такой код:

'!!!'.repeat(3);
'hello'.includes('h');

Это можно перекодировать только с помощью babel-polyfill, потому что babel-polyfill добавляет методы непосредственно в цепочку прототипов.

And more

С развитием истории появилось новое поколениеbabel-prenset-envОчень мощно, поймите 😜

Ссылка на ссылку

Бесплатная перепечатка - некоммерческая - непроизводная - сохранить авторство (Лицензия Creative Commons 3.0)

Категории