[Перевод] core-js@3, Babel смотрит в будущее

JavaScript
[Перевод] core-js@3, Babel смотрит в будущее

GitHub.com/здесь OI rock/co…Оригинальная ссылка

После полутора лет разработки, десятков версий, множества бессонных ночей,core-js@3Наконец выпустили. Этоcore-jsа такжеbabelОдно из самых больших изменений в функциональности, связанной с исправлениями.

чтоcore-js?

  • Это полифилл для стандартной библиотеки JavaScript, который поддерживает
    • НовейшиеECMAScriptстандартный
    • Предложение стандартной библиотеки ECMAScript
    • НемногоWHATGW / W3CСтандартный (кроссплатформенный или связанный с ECMAScript)
  • Максимальная модульность: вы можете загружать только те функции, которые хотите использовать.
  • Он не может загрязнять глобальное пространство имен
  • ЭтоТесно интегрирован с Babel: это может оптимизироватьcore-jsимпорт

Это самый распространенный,Самый популярныйСпособ исправить стандартную библиотеку JavaScript, но большой процент разработчиков не знает, что они используют его косвенно.core-js🙂

способствовать

core-jsЭто мой собственный хобби-проект, и он не приносил мне никакой прибыли. Это заняло у меня много времени и было очень дорого: закончитьcore-js@3, Я уволился с работы несколько месяцев назад. Этот проект стал катализатором для многих людей и компаний. Из-за этого собирайте деньги на поддержкуcore-jsОбслуживание имеет смысл.

если ты правcore-jsЗаинтересованные или используемые в вашей повседневной работе, вы можетеOpen CollectiveилиPatreonСтаньте спонсором.

Вы можете датьяОбеспечить хорошую работу, связанную с тем, что я делаю сейчас.

Или вы можете внести свой вклад другим способом, вы можете помочь улучшить код, тесты или документацию (пока чтоcore-jsДокументация по-прежнему ужасна! ).

core-js@3Какие изменения?

Изменения в стандартной библиотеке JavaScript

Этот выпуск включает в себя новые богатые исправления JavaScript по двум причинам:

  • core-jsРешающие изменения вносятся только в основные обновления версии, даже если они должны быть согласованы с содержанием предложения.
  • core-js@2Функция заморозилась полтора года назад; все новые функции могут быть добавлены только вcore-js@3эта ветка.

Стабильная функциональность ECMAScript

Стабильная функциональность ECMAScript вcore-jsуже давно почти полностью поддерживается вcore-js@3Были введены некоторые новые функции:

  • Добавлена ​​поддержка двух известных флагов, представленных в ECMAScript 2015.@@isConcatSpreadableа также@@species, для всех методов, которые их используют.
  • Добавлено из ECMAScript 2018Array.prototype.flatа такжеArray.prototype.flatMap(core-js@2противArray.prototype.flattenДля этой старой версии предложения предусмотрены исправления).
  • Добавлено из ECMAScript 2019Object.fromEntriesметод
  • Добавлено из ECMAScript 2019Symbol.prototype.descriptionаксессуар

Некоторые функции, которые были приняты в качестве предложений в ES2016-ES2019 и использовались в течение длительного времени, теперь помечены как стабильные:

Исправлено множество проблем, связанных с браузером, например,Safari 12.0 Array.prototype.reverse bugбыл исправлен.

Предложение ECMAScript

В дополнение к вспомогательному контенту, упомянутому выше,core-js@3Также теперь поддерживаются следующие предложения ECMAScript:

  • globalThisэтап 3 (теперь этап 4) предложение - ранее былиglobalа такжеSystem.global
  • Promise.allSettledэтап 2 (теперь этап 4) предложение
  • новыйSetметодПредложение 2 этапа:
    • Set.prototype.difference
    • Set.prototype.intersection
    • Set.prototype.isDisjoinFrom
    • Set.prototype.isSubsetOf
    • Set.prototype.isSupersetOf
    • Set.prototype.symmetricDifference
    • Set.prototype.union
  • Новый метод коллекцийПредложение этапа 1, которое включает в себя множество новых и полезных методов:
    • Map.groupBy
    • Map.keyBy
    • Map.prototype.deleteAll
    • Map.prototype.every
    • Map.prototype.filter
    • Map.prototype.find
    • Map.prototype.findKey
    • Map.prototype.includes
    • Map.prototype.keyOf
    • Map.prototype.mapKeys
    • Map.prototype.mapValues
    • Map.prototype.merge
    • Map.prototype.reduce
    • Map.prototype.some
    • Map.prototype.update
    • Set.prototype.addAll
    • Set.prototype.deleteAll
    • Set.prototype.every
    • Set.prototype.filter
    • Set.prototype.find
    • Set.prototype.join
    • Set.prototype.map
    • Set.prototype.reduce
    • Set.prototype.some
    • WeakMap.prototype.deleteAll
    • WeakSet.prototype.addAll
    • WeakSet.prototype.deleteAll
  • String.prototype.replaceAllэтап 1 (теперь этап 3) предложение
  • String.prototype.codePointsПредложение 1 этапа
  • Array.prototype.last(Item|Index)предложение 1 этапа
  • compositeKeyа такжеcompositeSymbolметодпредложение 1 этапа
  • Number.fromStringпредложение 1 этапа
  • Math.seededPRNGпредложение 1 этапа
  • Promise.any(объединенная ошибка)этап 0 (теперь этап 3) предложение

Некоторые предложения существенно изменились,core-jsТакже будут обновлены соответственно:

веб-стандарты

В эту категорию добавлено много полезных функций.

Самый важный из нихURLа такжеURLSearchParams. онОдин из самых популярных запросов функций. УвеличиватьURLа такжеURLSearchParams, и убедитесь, что они соответствуют спецификации в максимально возможной степени, сохраняя исходный код достаточно компактным для поддержки любой среды, котораяcore-js@3В разработкеодна из самых сложных задач.

core-js@3Стандартный для пакетов способ создания микрозадач в JavaScript:queueMicrotask.core-js@2при условииasapfunction, более старое предложение, обеспечивающее ту же функциональность.queueMicrotaskОпределенный в стандарте HTML, он уже доступен в современных браузерах, таких как Chromium или NodeJS.

Другая популярная особенность - это запрос на поддержкуКоллекция ДОМ.forEachметод. из-заcore-jsPolyfill был сделан для итераторов коллекции DOM, почему бы не дать节点列表а такжеDOMTokenListтакже увеличить.forEachШерстяная ткань?

Удалить устаревшие функции:

  • Reflect.enumrateпотому что его убрали из стандарта
  • System.globalа такжеglobalТеперь они былиglobalThisзаменять
  • Array.prototype.flattenсейчасArray.prototype.flatзаменять
  • asapодеялоqueueMicrotaskзаменять
  • Error.isErrorдавно отозван
  • RegExp.escapeбыл давно отвергнут
  • Map.prototype.toJSONа такжеSet.prototype.toJSONТоже давно отказались
  • Ненужные и некорректно добавленные методы итераторов:CSSRuleList,MediaList,StyleSheetList.

Больше никаких нестандартных, непредлагаемых функций

Много лет назад я начал писать библиотеку, которая является ядром моих программ на JavaScript: эта библиотека содержит полифиллы и некоторые полезные функции, которые мне нужны. Через некоторое время эта библиотека начинается сcore-jsНазовите выпуск. Я думаю, что большинство из них сейчасcore-jsПользователям не нужны нестандартныеcore-jsфункции, большинство из которых были удалены в более ранних версиях, теперь пришло время перенести остальные изcore-jsУдалять.从这个版本开始，core-jsМожно назвать полифиллом.

Имена пакетов, записей и модулей

упоминается в выпускеcore-jsПакет очень большой (~2MB) с большим количеством повторяющихся файлов. по этой причине,core-jsДелится на 3 пакета:

  • core-jsОпределить глобальные полифилы. (~ 500 КБ,40 КБ сжато и сжато gzip)
  • core-js-pure, который предоставляет полифиллы, не загрязняющие глобальные переменные. это иcore-js@2серединаcore-js/libraryдовольно. (~ 440 КБ)
  • core-js-bundle: определяет упакованную версию глобальной заливки

core-jsВ более ранних версиях стабильные функции ECMAScript и модульность полифилла для предложений ECMAScript необходимо добавлять отдельно.es6.а такжеes7.приставка. Это решение было принято в 2014 году, когда все функции после ES6 рассматривались как ES7. существуетcore-js@3Все стабильные функции ECMAScript добавлены вes.префикс, добавленный предложением ECMAScriptesnext.приставка.

Почти все точки входа CommonJS изменились.core-js@3в сравнении сcore-js@2Больше точек входа: это обеспечивает максимальную гибкость, позволяя вам импортировать только те зависимости, которые нужны вашему приложению.

Вот несколько примеров использования новой записи:

// 使用 `core-js` 全部功能打补丁：
import "core-js";
// 仅仅使用稳定的 `core-js` 功能 - ES 和 web 标准：
import "core-js/stable";
// 仅仅使用稳定的 ES 功能
import "core-js/es";

// 如果你想用 `Set` 的补丁
// 所有 `Set`- ES 提案中，相关的功能：
import "core-js/features/set";
// 稳定的 `Set` ES 功能和来自web标准的功能
// （DOM 集合迭代器）
import "core-js/stable/set";
// 只有 `Set` 所需的稳定的 ES 功能
import "core-js/es/set";
// 与上面一致，但不会污染全局命名空间
import Set from "core-js-pure/features/set";
import Set from "core-js-pure/stable/set";
import Set from "core-js-pure/es/set";


// 仅仅为需要的方法打补丁
import "core-js/feature/set/intersection";
import "core-js/stable/queque-microtask";
import "core-js/es/array/from";

// 为 reflect metadata 提案打补丁
import "core-js/proposals/reflect-metadata";
// 为所有 stage 2+ 的提案打补丁
import "core-js/stage/2";

другие важные изменения

core-jsполифиллы могутНастройка уровней вторжения. Если вы думаете, что какая-то ситуацияcore-jsОбнаружение функций слишком навязчиво, вам достаточно нативной реализации или не обнаружена глючная реализацияcore-jsобнаружено, вы можете изменитьcore-jsповедение по умолчанию.

Если невозможно установить каждую деталь спецификации для реализации функции,core-jsдобавил один.shamсвойства, например, в IE11Symbol.shamдаtrue.

Больше никакого LiveScript!Когда я начал писатьcore-js, я в основном используюLiveScript; Через некоторое время я переписал все полифиллы на JavaScript. существуетcore-js@2Служебные функции для тестирования и справки по-прежнему используют LiveScript: это очень интересный язык, похожий на CoffeeScript, с мощным синтаксическим сахаром, который позволяет писать очень компактный код, но он почти мертв. Кроме того, это такжеcore-jsбарьер взносов, поскольку большинствоcore-jsПользователь не знает языка.core-js@3Тесты и служебные функции используют современный синтаксис ES: он станетcore-jsХорошее время, чтобы внести свой вклад 🙂.

Для большинства пользователей для оптимизацииcore-jsимпорт, я рекомендую использоватьbabel. Конечно, в некоторых случаяхcore-js-builderеще полезно. теперь он поддерживаетtargetпараметр, используйте целевой движок с浏览器列表Запрос. Вы можете создать пакет, содержащий только те полифиллы, которые требуются целевому движку. Для этого случая я сделалcore-js-compat, для получения дополнительной информации об этом вы можете получить его отэтой статьи@babel/preset-envчастьпонимать.

Это только вершина айсберга, внутри происходят новые изменения. больше оcore-jsизменения могут бытьchangelogнайти в.

Babel

Как указано выше,babelа такжеcore-jsтесно интегрирован:babelобеспечивает оптимизациюcore-jsВозможность оптимизировать импорт.core-js@3Очень важной частью развития является совершенствованиеcore-jsСвязанныйbabelфункция (см.этот пиар). Эти измененияBabel 7.4.0опубликовано.

babel/polyfill

@babel/polyfillэто пакет, который содержит толькоcore-jsВнедрение стабильной версии (также предложение в Babel 6) иregenerator-runtime/runtime, для транспиляции генераторов и асинхронных функций. Этот пакет не предоставляетcore-js@2прибытьcore-js@3Плавный путь обновления: решил отказаться от поддержки по этой причине.@babel/polyfillВместо этого введите необходимыеcore-jsа такжеregenerator-runtime.

оказалось

import "@babel/polyfill";

Вместо этого используйте две строки:

import "core-js/stable";
import "regenerator-runtime/runtime";

Не забудьте установить эти две зависимости напрямую!

npm i --save core-js regenerator-runtime

@babe/preset-env

@babel/preset-envЕсть два разных режима, черезuseBuiltInsОпции:entryа такжеusageоптимизацияcore-jsимпорт.

В Babel 7.4.0 представлены изменения, общие для обоих режимов, а также модификации, специфичные для каждого режима.

С этого момента@babel/preset-envслужба поддержкиcore-js@2а такжеcore-js@3,следовательноuseBuiltInsТребуется новая опция --corejs, этот параметр используется для определения использованияcore-jsверсия(corejs: 2илиcorejs: 3). Если не установлено,corejs: 2является значением по умолчанию, и появится предупреждение.

Для того, чтобы Babel поддерживалcore-jsНовая функция позволяет вам определять явные младшие номера версий в вашем проекте. Например, вы хотите использоватьcore-js@3.1Благодаря новым функциям в этом выпуске вы можете установитьcorejsВарианты3.1:corejs: '3.1'илиcorejs: {version: '3.1'}.

@babel/preset-envОдной из наиболее важных функций является предоставление источника данных о различных функциях поддержки браузера, которые можно использовать для определения того,core-jsзаполнить какой-либо контент.caniuse,mdnа такжеcompat-tableявляются отличными образовательными ресурсами, но это не значит, что они могут использоваться разработчиками в качестве источника данных: толькоcompat-tableУпакованные наборы данных, связанные с ES, которые@babel/preset-envиспользуется, но все же есть некоторые ограничения:

  • Он содержит данные только о функциях и предложениях ECMAScript, а также функциях веб-платформы, таких какsetImmediateИли итератор коллекции DOM не имеет значения. Так что до сих пор,@babel/preset-envвсе еще проходитcore-jsДобавьте все функции веб-платформы, даже если они уже поддерживаются.

  • Он не содержит никакой информации об ошибках браузера (даже серьезных): например, в Safari 12, упомянутом выше.Array#reverse,ноcompat-tableне помечает его как неподдерживаемый. с другой стороны,core-jsЭта ошибочная реализация была исправлена, но с тех порcompat-tableотношение и не может его использовать.

  • Он только упаковывает некоторую базовую букву, наивные тесты не проверяли, может ли функцию работать в реальной среде. Например, разрушение старой версии Safari не является итератором.nextметод, ноcompat-tableУказывает на поддержку Safari, поскольку используетtypeofМетод итератора обнаружения метода возвращен"function". Некоторые функции, такие как типизированные массивы, почти не рассматриваются.

  • compat-tableНе предназначен для предоставления данных инструментам. яcompat-tableодин из сопровождающих , ноДругие сопровождающие объекты для поддержания этой функции.

По этой причине я создалcore-js-compat: это предусмотрено для разных браузеровcore-jsНеобходимые данные для модуля. когда используешьcore-js@3час,@babel/preset-envбудет заменен новым пакетомcompat-table.Пожалуйста, помогите нам протестировать и предоставить сопоставление отсутствующих данных двигателя!😊.

До Вавилона 7.3,@babel/preset-envЕсть некоторые вопросы, связанные с порядком внедрения полифиллов. Начиная с 7.4.0,@babel/preset-envДобавляйте только необходимые полифилы в рекомендованном порядке.

useBuiltIns: entry with corejs: 3

При использовании этой опции@babel/preset-envвместо прямого цитированияcore-jsВместо этого импортируются модули, специфичные для целевой среды.

До этого изменения,@babel/presetзаменить толькоimport '@babel/polyfill'а такжеimport 'core-js', они являются синонимами, используемыми для полифилла всех стабильных функций JavaScript.

Сейчас@babel/polyfillОткажитесь от использования, когдаcorejsПри установке на 3@babel/preset-envне будет его переводить.

core-js@3Промежуточная замена@babel/polyfillда

import "core-js/stable";
import "regenerator-runtime/runtime";

Когда целевой браузерchrome 72, указанный выше контент будет@babel/preset-envПеревести в

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopaables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modlues/web.immediate";

Когда целевой браузерchrome 73(полностью поддерживает стандартную библиотеку ES2019), будет внедряться очень редко:

import "core-js/modules/web.immediate";

поскольку@babel/polyfillУстарело в пользу отдельногоcore-jsа такжеregenerator-runtime, мы можем оптимизироватьregenerator-runtimeимпорт. По этой причине, если целевой браузер изначально поддерживает генераторы, тоregenerator-runtimeИмпорт будет удален из исходного кода.

Теперь установитеuseBuiltIns: entryмодальный@babel/preset-envСобрать все доступныеcore-jsВход и их комбинации. Это означает, что вы можете настроить, используя различныеcore-jsВход, он будет оптимизирован в соответствии с целевой средой.

Например, целевая средаchrome 72,

import "core-js/es";
import "core-js/proposals/set-methods";
import "core-js/features/set/map";

будет заменен на

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/esnext.set.difference";
import "core-js/modules/esnext.set.intersection";
import "core-js/modules/esnext.set.is-disjoint-from";
import "core-js/modules/esnext.set.is-subset-of";
import "core-js/modules/esnext.set.is-superset-of";
import "core-js/modules/esnext.set.map";
import "core-js/modules/esnext.set.symmetric-difference";
import "core-js/modules/esnext.set.union";

useBuiltIns: usage with corejs: 3

При использовании этой опции@babel/preset-envДобавляйте полифиллы в начале каждого файла, которые не поддерживаются целевой средой и используются только в текущем файле.

Например,

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

Когда целевой средой является старый браузер, такой какie 11, который будет преобразован в

import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

когда цельchrome 72Нет необходимости импортировать, потому что эта среда требует полифилл:

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

До Вавилона 7.3,useBuiltIns: usageНестабильный и недостаточно надежный: многие полифиллы не упакованы, и добавлено много полифилов, которые не являются обязательными зависимостями. В Babel 7.4 я пытался заставить его понимать все возможные шаблоны использования.

в средствах доступа к свойствам, деструктуризации объектов,inДля операторов доступа к глобальным свойствам объектов я усовершенствовал технику определения полифиллов, которые следует использовать.

@babel/preset-envТеперь введите полифиллы, необходимые для функции синтаксиса: используйтеfor-ofитераторы, деструктурирование, операторы распространения иyieldделегировать; использовать динамическийimportпромисы, асинхронные функции и генераторы и т. д.

Babel 7.4 поддерживает внедрение полифилов предложений. По умолчанию,@babel/preset-envне будет вводить их, но вы можете пройтиproposalsНастройки флага:corejs: { version: 3, proposals: true }.

@babel/runtime

когда используешьcore-js@3час,@babel/transform-runtimeтеперь черезcore-js-pure(core-jsВерсия, которая не загрязняет глобальные переменные) внедряет полифиллы.

поставив@babel/transform-runtimeнастраиватьcorejs: 3Опции и создание@babel/runtime-corejs3пакет, ужеcore-js@3а также@babel/runtimeинтегрированы вместе. Но какую пользу это принесет?

@babel/runtimeПопулярная проблема: методы экземпляра не поддерживаются. от@babel/runtime-corejs3Для начала этот вопрос был решен. Например,

array.includes(something);

будет компилироваться как

import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";

_includesInstanceProperty(array).call(array, something);

Еще одним заметным изменением является поддержка предложения ECMAScript. По умолчанию,@babel/plugin-transform-runtimeНе будет вводить полифиллы для предложений и использовать записи, которые не содержат предложений. но как ты@babel/preset-envкак это сделано в , вы можете установитьproposalsФлаг для включения:corejs: { version: 3, proposals: true }.

нетproposalsлоготип,

new Set([1, 2, 3, 2, 1]);
string.matchAll(/something/g);

будет компилироваться как:

import _Set from "@babel/runtime-corejs/core-js-stable/set";

new _set([1, 2, 3, 2, 1]);
string.matchAll(/something/g);

когда установленоproposals, это станет:

import _Set from "@babel/runtime-corejs3/core-js/set";
import _matchAllInstanceProperty from "@babel/runtime-corejs/core-js/instance/match-all";

new _Set([1, 2, 3, 2, 1]);
_matchAllInstanceProperty(string).call(string, /something/g);

Исправлены некоторые старые проблемы. Например, следующий популярный шаблон@babel/runtime-corejs2не работает, но в@babel/runtime-corejs3поддерживается.

myArrayLikeObject[Symbol.tierator] = Array.prototype[Symbol.iterator];

несмотря на то что@babel/runtimeБолее ранние версии не поддерживали методы экземпляра, но поддерживалась итерация с использованием некоторых пользовательских вспомогательных функций ([Symbol.iterator]()и его присутствие). Извлечение ранее не поддерживалось[Symbol.iterator]метод, но теперь поддерживается.

Как неожиданность,@babel/runtimeIE8- теперь поддерживается, но с некоторыми ограничениями, например, IE8- не поддерживает аксессоры, преобразование модулей должно выполняться свободным способом,regenerator-runtime(Внутренне реализовано с использованием ES5+). Его необходимо транспилировать через этот плагин.

Наслаждайтесь будущим

много работы, ноcore-jsЭто далеко не идеально. Как следует улучшить эту библиотеку и инструмент в будущем? Как языковые изменения повлияют на это?

опора старого двигателя

Сейчас,core-jsМы пытаемся поддерживать все возможные движки или платформы, на которых мы можем протестировать: даже IE8 или, например, более ранние версии Firefox. Хотя это работает для некоторых пользователей, только небольшой процент использует егоcore-jsразработчиков нуждаются в этом. Для большинства пользователей это вызовет проблемы, такие как слишком большие пакеты или медленное выполнение.

Основная проблема связана с поддержкой движков ES3 (сначала IE8): большинство современных функций ES основаны на ES5, недоступных в старых браузерах.

Самая большая отсутствующая функция — это дескриптор свойства: когда он отсутствует, некоторые функции не могут быть заполнены полифиллом, потому что они являются либо аксессорами (например,RegExp.prototype.flagsилиURLустановщики свойств) или на основе аксессора (например, полифилл типизированного массива). Чтобы устранить этот недостаток, нам нужно использовать различные обходные пути (например, сохранениеSet.prototype.sizeобновить). Поддерживать эти решения иногда болезненно, удаление их значительно упростит многие полифиллы.

Однако дескрипторы — это только часть проблемы. Стандартная библиотека ES5 содержит множество других функций, которые считаются основой современного JavaScript:Object.create,Object.getPrototypeOf,Array.prototype.forEach,Function.prototype.bind,так далее. В отличие от большинства современных функций,core-jsполагаться на них внутренне иЧтобы реализовать простую современную функцию,core-jsРеализации некоторых из этих «строительных модулей» необходимо загрузить. Для тех, кто хочет создать достаточно небольшой билдпак и просто хочет импортировать деталиcore-jsпользователей, это проблема.

IE8 по-прежнему популярен в некоторых странах, но для того, чтобы сеть развивалась, в какой-то момент браузер должен исчезнуть.IE8Выпущен 19 марта 2009 года, сегодня исполнилось 10 лет. IE6 18 лет: новая версия несколько месяцев назадcore-jsIE6 больше не тестируется.

существуетcore-js@4Мы должны отказаться от IE8 и других движков, не поддерживающих ES5.

Модули ECMAScript

core-jsиспользоватьCommonJSСпецификация модуля. Долгое время это была самая популярная спецификация модуля JavaScript, но теперь ECMAScript предоставляет собственную спецификацию модуля. Многие движки уже поддерживают его. Некоторые инструменты сборки (такие как rollup ) основаны на нем, другие предоставляют его какCommonJSзаменять. Это означает, что предоставляется необязательная версия спецификации модуля ESMAScript.core-jsработает.

Поддержка стандартных веб-расширений?

core-jsВ настоящее время сосредоточен на поддержке ECMAScript, но также поддерживает небольшое количество кросс-платформенных и веб-стандартных функций, тесно связанных с ECMAScript. Добавьте для веб-стандартов, таких какfetchПолифилл такого рода является долгожданным запросом функции.

core-jsОсновная причина, по которой их не нужно увеличивать, заключается в том, что они серьезно увеличат размер сборки и заставятcore-jsПользователи загружают функции, которые они могут не использовать. Сейчасcore-jsэто максимальная модульность, пользователи могут выбирать только те функции, которые им нужны, что-то вроде@babel/preset-envа также@babel/runtimeМожет помочь пользователям уменьшить бесполезные и ненужные полифимки.

Не пора ли пересмотреть это решение?

для целевой среды@babel/runtime

В настоящее время мы не можем@babel/preset-envсюда@babel/runtimneУстановите целевую среду плюс. Это означает, что даже если целью является современный браузер,@babel/runtimeТакже будут отмечены все возможные полифиллы: это излишне увеличивает размер финальной сборки.

Сейчасcore-js-compatВключите все необходимые данные, в дальнейшем вы сможете@babel/runtimeДобавьте поддержку компиляции для целевой среды в@babel/preset-envдобавлено вuseBuiltIns: runtimeопции.

Улучшенная оптимизированная загрузка полифилла

Как объяснялось выше, плагин Babel дает нам различные способы оптимизации.core-jsиспользовать, но они не идеальны: мы можем их улучшить.

пройти черезuseBuiltIns: usageопции,@babe/preset-envМогут работать лучше, чем раньше, но все равно не работают в некоторых необычных случаях: когда код не может быть проанализирован статически. Чтобы решить эту проблему, нам нужно найти способ для разработчиков библиотек определить, какие полифиллы нужны их библиотеке, не загружая их напрямую: какие-то метаданные, которые будут внедрять полифиллы при создании окончательного пакета сборки.

другой дляuseBuiltIns: usageПроблема заключается в дублировании импорта полифиллов.useBuiltIns: usageВозможность вводить много в каждый файлcore-jsимпорт. Но что, если в нашем проекте тысячи файлов или даже десятая часть? В этом случае с импортомcore-jsпо сравнению с собой, импортcore-js/...Будет больше строк кода: нам нужен способ собрать все импорты в один файл, чтобы можно было удалить дубликаты.

Почти все нуждается в поддержке, напримерIE11браузер@babel/preset-envПользователи используют один и тот же пакет сборки для каждого браузера. Это означает, что современные браузеры, полностью поддерживающие ES2019, будут загружать ненужные полифиллы, которые требуются только для IE11. Конечно, мы можем создавать разные сборки для разных браузеров, например,type=module / nomodulesСвойства: один пакет сборки для современных браузеров, поддерживающих модульность, другой — для устаревших браузеров. К сожалению, это не полное решение этой проблемы: очень полезен сервис, который упаковывает полифиллы, требуемые целевому браузеру, на основе пользовательского агента. У нас уже есть один -polyfill-service. Хотя полифиллы интересны и популярны, качество полифиллов оставляет желать лучшего. Это не так плохо, как было несколько лет назад: команда проекта активно работает над его изменением, но если вы хотите совместить с ними нативную реализацию, я не рекомендую вам использовать полифиллы с этим проектом. Много лет назад я пытался использовать этот проект дляcore-jsв качестве источника полифилла, но это невозможно. потому чтоpolyfill-serviceФайлы зависимостей являются вложенными, а не модульными (например,core-jsПервые несколько месяцев после запуска 😊).

Отличный источник полифилла, подобный этому, интегрирует --core-jsсервисы, через такой сервис, как BabeluseBuiltIns: usageКроме того, статический анализ исходного кода может действительно революционизировать наши представления о полифиллах.

Новые планы функций от TC39 иcore-jsВозможные проблемы

TC39 усердно работает для улучшения ECMAScript: вы можете просмотретьcore-jsВсе новые предложения внедряются в Check the progress. Однако я думаю, что некоторые из новых предлагаемых функций могут вызвать серьезные проблемы при полифилле или транспиляции. Достаточно, чтобы написать новую статью об этом, но я попытаюсь обобщить свои мысли здесь.

Предложение стандартной библиотеки, этап 1

Теперь TC39 рассматривает возможность добавления ECMAScript.Встроенные модули: модульная стандартная библиотека. Это будет лучшим дополнением к JavaScript, иcore-jsэто лучшее место, где его можно заполнить полифиллом. согласно с@babel/preset-envа также@babel/runtimeТеоретически используемая технология позволяет легко вводить полифиллы, необходимые встроенным модулям. Однако текущая версия этого предложения вызывает серьезные проблемы, которые не делают его простым.

полифиллы для встроенных модулей,По предложению автора, просто означает возврат к многоуровневому API или импорту карт. Это означает, что если собственный модуль отсутствует, он сможет загрузить полифил через указанный URL-адрес. Это определенно не нужно полифиллу, и это то же самое, что иcore-jsархитектура и другие популярные полифилы несовместимы. Импорт карт не должен быть единственным способом заполнения встроенных модулей.

Мы можем получить встроенные модули, используя синтаксис модуля ES с определенным префиксом. Этот синтаксис не имеет эквивалента в более ранних версиях языка — транспилированные модули вряд ли будут взаимодействовать с нетранспилированными в современных браузерах — что может вызвать проблемы с распространением пакетов.

Идя дальше, он будет работать асинхронно. Это серьезная проблема для обнаружения функций — когда вы хотите обнаружить функцию и загружается полифилл, скрипт не ждет — обнаружение функций должно выполняться синхронно.

Реализация встроенных модулей впервые без транспиляции и полифилла. Если не изменено, в текущемcore-jsВ этом формате нельзя будет полифилить встроенные модули. Предложенный способ полифиллинга серьезно усложнил бы разработку.

Эту проблему со стандартной библиотекой можно решить, добавив новую глобальную переменную (будет ли она последней?): реестр встроенных модулей, которые позволят асинхронно устанавливать и получать, например:

StandardLibraryRegistry.get(moduleName);
StandardLibraryRegistry.set(moduleName, value);

Асинхронные обратные вызовы, такие как многоуровневые API, следует использовать после глобального реестра.

В частности, это упростит преобразование импорта нативных модулей в старый синтаксис.

Предложение декоратора, новый синтаксис итератора, этап 2

в этом предложенииновый итератор, он был серьезно переделан. Определения декораторов больше не являются синтаксическим сахаром, как и встроенные модули, мы не можем написать декоратор на старой версии языка и использовать его как нативный декоратор. Кроме того, декораторы — это не просто идентификаторы — они живут в параллельных лексических областях видимости: это означает, что уже скомпилированные декораторы не могут взаимодействовать с нативными декораторами.

Авторы предложения рекомендуют распространять пакеты с нескомпилированным декоратором, предоставляя пользователям пакета возможность компилировать свои зависимости. Однако это невозможно при различных обстоятельствах. Этот метод предотвратит их добавление в стандартную библиотеку JS.core-jspolyfill новые встроенные декораторы.

Декораторы должны быть способом применить функциональность к чему-то, они должны быть просто синтаксическим сахаром для обертывания. Зачем усложнять?

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

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

если ты правcore-jsинтересующий вас проект или вы используете его в своей повседневной работе, вы можете статьOpenCollectiveилиPatreonдонор.core-jsЗа спиной не компания: его будущее зависит от вас.

здесьМожете прокомментировать эту статью.

Denis Pushkarev, 19 марта 2019 г., спасибоNicolò Ribaudoредактировать.

информация, которая может быть использована

Спасибо за прочтение

Спасибо, что прочитали это, пожалуйста, дайте указатели, если перевод не очень хорош. Надеюсь мой материал будет вам полезен, еще раз спасибо.ООО "Тысяча миль"

Категории