Крутые вещи появятся в Babel 7.0

JavaScript браузер Программа перевода самородков Babel
Крутые вещи появятся в Babel 7.0

Приходите посмотреть на это 👋! яHenry,Babelодин из хранителей .

РЕДАКТИРОВАТЬ: я ушелBehanceи сделалPatreon,пытатьсяПостоянная приверженность работе с открытым исходным кодом, попросите вас или вашу компанию рассмотреть вопрос о пожертвовании.

Введение в Вавилон

Некоторые могут рассматривать Babel как инструмент, позволяющий писать код ES6. Точнее, Babel — это компилятор JavaScript, который преобразует код ES6 в код ES5. Это было уместно, когда он назывался 6to5, но я думаю, что Babel стал чем-то большим.

Теперь давайте поговорим о предыстории. Это необходимо, потому что в отличие от других языков (даже Node.js), которые работают на сервере, версия JavaScript, которую вы можете запустить, зависит от конкретной версии вашего браузера. Не имеет значения, используете ли вы последнюю версию браузера, а ваши пользователи (которых вы хотите сохранить) по-прежнему используют IE. Но, например, если вы хотите написатьclass A {}, то вам не повезло — часть ваших пользователей получитSyntaxErrorи пустая страница.

Вот почему был создан Вавилон. Это позволяет вам написать нужную вам версию JavaScript, зная, что она будет корректно работать во всех (старых) поддерживаемых вами браузерах.

Однако это не останавливается на «ES6» (некоторые любят говорить ES2015). Babel действительно расширил свою первоначальную цель — компилировать только код ES6. Теперь он может скомпилировать любую версию ES20XX (последнюю версию JavaScript), которую вы хотите, в ES5.

идущий процесс

В этом проекте интересно то, что как только синтаксис JavaScript добавлен, Babel необходимо реализовать преобразователь для его преобразования.

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

Что ж, мы сделали инструмент, который позволяет указать, какие браузеры вы поддерживаетеbabel-preset-en, чтобы помочь решить эту проблему. Он автоматически конвертирует только те вещи, которые изначально не поддерживаются браузером.

Кроме того, Babel (из-за его использования в сообществе) может повлиять на будущее самого языка JavaScript. Учитывая, что это инструмент для преобразования кода JS, его также можно использовать для реализации коммитов вTC39(Технический комитет Ecma 39, организация, продвигающая JavaScript в качестве стандарта).

«Предложение» входит в язык через полный процесс от стадии 0 до стадии 4. Babel как инструмент проверяет новые идеи в нужных местах и ​​позволяет разработчикам использовать его в своих приложениях, чтобы они могли предоставлять отзывы комитетам.

Это важно по следующим причинам: комитеты хотят быть уверены, что вносимые ими изменения соответствуют желанию сообщества (последовательным, интуитивным, эффективным). Реализация малоизвестной идеи в браузере медленная (C++ в браузере против JavaScript в Babel), дорогая и требует от пользователей использования флага в браузере вместо изменения файла конфигурации Babel.

Поскольку Babel так популярен, есть большая вероятность, что он найдет реальное применение. Это сделало бы предложение лучше, чем эта реализация без обратной связи с более широким сообществом разработчиков.

И это не только полезно в продуктах. наш онлайнREPLПомогает людям изучать JavaScript и позволяет им тестировать вещи.

Я думаю, что Babel — очень хороший инструмент для программистов, чтобы понять, как работает JavaScript. Участвуя в этом проекте, они узнают многие другие концепции, такие как AST, компиляторы, спецификации языка и многое другое.

Мы очень взволнованы будущим этого проекта и не можем дождаться, чтобы увидеть, куда может двигаться эта команда. Пожалуйста, присоединяйтесь и помогите нам!

моя история

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

Что касается меня, я признал потребность и интересный проект. Я постепенно и последовательно становился все более вовлеченным, и теперь у меня был мой работодатель,Behance, финансировал половину моего времени работы над Babel.

Иногда «обслуживание» означает просто исправление ошибок в Slack илиTwitterОтвечайте на вопросы в Интернете или пишите список изменений (на самом деле это зависит от каждого из нас). Но в последнее время я меньше внимания уделяю исправлениям ошибок и функциям. Вместо этого я трачу свое время на размышления над вопросами более высокого уровня, такими как: Каково будущее этого проекта? Как мы расширяем наше сообщество с точки зрения сопровождающих и пользователей. Как мы поддерживаем этот проект с точки зрения финансирования? Как мы вписываемся в экосистему JavaScript в целом (образование,TC39,инструмент)? Есть ли здесь роль для нас, чтобы помочь новичкам в проектах с открытым исходным кодом (RGSoCа такжеGSoC)?

Из-за этих проблем меня больше всего в этом выпуске волнуют не функции (их много: новые предложения для первоначальной реализации, такие какPipeline Operator (a |> b), с помощью команды TSnew TypeScript presetи файлы .babelrc.js).

Но я более взволнован тем, что представляют эти функции: год устойчивых усилий, чтобы не нарушать все, сбалансируйте ожидания пользователей (почему так много медленного сборки / кода введены так велико, почему код не имеет достаточного количества совместимых, почему это Работа не может обойтись без конфигурации, почему нет альтернативы другим случаям) и поддержание солидной команды добровольцев.

И я знаю, что наша индустрия уделяет большое внимание «крупным релизам», раскрутке функций и звезд, но это был просто уходящий день. Я хотел бы предложить, чтобы мы продолжали думать о том, что поддерживает здоровое движение экосистемы.

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

Копаемся в журнале изменений

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

Поскольку люди хотят больше узнать о том, как работает Babel, мы открыли новыйвидео страница.这个页面包含了 Babel 会议谈话的视频，来自团队成员和社区人们的相关概念。

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

Вот некоторые основные моменты и краткие факты:

  • Вавилон в28 октября 2017 г.3 года уже!
  • Дэниел положилbabel/babylonа такжеbabel/babel-preset-env перейти кВ основном монорепозитории Babel,babel/babel. Он содержит историю Git, теги и предложения.
  • Мы получили от Facebook с открытым исходным кодомЕжемесячное пожертвование 1000 долларов!
  • Это самое большое ежемесячное пожертвование, которое мы получили с самого начала (следующее — 100 долларов в месяц).
  • В то же время мы будем использовать наши средства для личной встречи и отправки людей на конференцию TC39. Эти конференции проводятся по всему миру каждые 2 месяца.
  • Если компания хочет сформулировать, что спонсировать, мы можем создать отдельный вопрос для отслеживания. Раньше это было сложно, потому что нам приходилось платить из своего кармана или искать выступление на конференции на той же неделе, чтобы заплатить за это.

как вы можете помочь

Если ваша компания готова поддержать фундаментальную часть разработки JavaScript и ее будущее какВернуть, подумайте о том, чтобы дать намOpen Collectiveпожертвовать. Вы также можете внести свой вклад в разработку, чтобы поддержать проект.

# 1: Помогите поддерживать проект (время разработчика на работе)

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

# 2: Помощь в развитии фонда

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

# 3 Вклад из других источников

Например,Angusсделал насофициальная песня!

Обновить

Мы также поможем вам обновитьПерепишите файл package.json/.babelrcинструменты и многое другое. В идеале это означает, что он изменит все необходимые изменения номера версии, переименования пакетов и изменения конфигурации.

При попытке обновления, пожалуйста, свяжитесь с нами, чтобы помочь и опубликовать проблемы. Это отличная возможность принять участие и помочь обновить экосистему.

предыдущий постСуммировать

  • Отказ от поддержки Node 0.10/0.12/5
  • возобновитьПредложение TC39
  • Разделитель чисел:1_000
  • Необязательные операторы цепочки:a?.b
  • import.meta(поддающийся разбору)
  • Дополнительные привязки Catch:try { a } catch {}
  • BigInt (поддающийся разбору):2n
  • Разделить производное, расширенное наexport-default-fromа такжеexport-ns-form
  • служба поддержки.babelrc.js(Конфигурация с использованием JavaScript вместо JSON)
  • Добавлен новый пресет Typescript и разделенные пресеты React/Flow.
  • УвеличиватьПоддержка сегментации JSXи разные обновления потока
  • Для меньшего объема снимите внутреннюю частьbabel-runtimeполагаться

Последнее обновленное предложение TC39

  • Оператор трубопровода:a |> b
  • Выражение броска:() => throw 'hi'
  • Недопустимый оператор слияния:a ?? b

Устаревшие пресеты года (например, babel-preset-es20xx)

Примечание: используйтеbabel-preset-env:

Что может быть лучше, чем решить, какой пресет Babel использовать? Уже сделано за вас, автоматически!

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

babel-preset-envНа самом деле оченьСтарыйпресет, который заменяет любой другой синтаксический пресет, который вам понадобится (es2015, es2016, es2017, es20xx, последний и т. д.).

Он заменяет все старые пресеты для компиляции последней ежегодной версии JavaScript (независимо от этапа 4). Но он также может компилироваться в соответствии с указанной вами целевой средой: он может обрабатывать режим разработки, например, последнюю версию браузера, или несколько сборок, например версию IE. У него даже есть другая версия для браузеров, которые были популярны в течение многих лет.

Пресеты сцены не удаляются (babel-preset-stage-x)

Мы можем обновить его в любое время, возможно, нам просто нужно выбрать лучшую систему, чем текущие пресеты.

На данный момент пресеты сцены — это просто список плагинов, которые мы вручную обновляем после каждой сессии TC39. Чтобы сделать это управляемым, нам нужно разрешить основным выпускам буферизовать эти «нестабильные» пакеты. Это отчасти потому, что комитет все равно перестроит эти пакеты. Так что мы, вероятно, сделаем это из официального пакета, и тогда мы сможем предоставлять более качественные новости и так далее.

Переименовать: Пакеты с заданной областью (@babel/x)

Вот опрос, который я публиковал год назад:

В то время не так много проектов использовали пакеты с заданной областью действия, поэтому многие люди даже не знали об их существовании. Тогда вам, вероятно, приходилось платить за учетную запись npm org, теперь она бесплатна (и также поддерживает пакеты без области действия).

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

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

  • Трудности с именами: нам не нужно проверять, решит ли кто-то еще использовать наше соглашение об именах в своем плагине.
  • У нас была похожая проблема с приседанием пакетов
  • иногда люди создаютbabel-preset-20xxИли другие сумки для удовольствия. Мы должны опубликовать проблему и отправить ее обратно по электронной почте.
  • У некоторых людей есть законный пакет, но это происходит, и мы хотим позвонить на имена одинаковы
  • Кто-то видит, что новое предложение объединяется (например, необязательные операторы цепочки или конвейера), и решает разветвить и опубликовать под тем же именем. Затем, когда мы публикуем, нам говорят, что пакет опубликован 🤔. Поэтому мне пришлось найти их электронные письма и команду поддержки npm, вернуть пакет и опубликовать его заново.
  • Под тем же именем, что такое «официальный» пакет и что такое пакет пользователя/сообщества? Мы получили сообщения о проблемах от людей, использующих неправильное имя или неофициальный пакет, потому что они думали, что это часть Babel. Примером этого является то, что есть отчет, в котором говоритсяbabel-envпереписать их.babelrcдокумент. Им потребовалось некоторое время, чтобы понять, что это не так.babel-preset-env.

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

Пример изменения имени области действия:

  • babel-cli -> @babel/cli
  • babel-core -> @babel/core
  • babel-preset-env -> @babel/preset-env

Переименовать:-proposal-

Теперь любое предложение будет-proposal-Назван, чтобы пометить их как еще не в официальном JavaScript.

так@babel/plugin-transform-class-propertiesстали@babel/plugin-proposal-class-properties, когда дело дойдет до этапа 4, мы назовем его обратно.

Переименовать: удалить год из названия плагина

Раньше у плагинов был год в названии, но теперь это не требуется.

так@babel/plugin-transform-es2015-classesстали@babel/plugin-transform-classes.

Поскольку год указан только для es3/es2015, мы ничего не меняли по сравнению с es2016 или es2017. В любом случае, мы установили для этих предустановок значение preset-env, а для буквальной настройки шаблона мы просто добавили его в литеральное преобразование шаблона.

Одноранговые зависимости и интеграции

Давайте представим@babel/coreодноранговые зависимости от , для всех плагинов (@babel/plugin-class-properties), предустановки(@babel/preset-env) и пакеты верхнего уровня (@babel/cli,babel-loader)

peerDependencies — это зависимости, которые, как ожидается, будут использоваться вашим кодом, в отличие от зависимостей, которые используются только для деталей реализации. -Ответ Стейн де Витт на StackOverflow

babel-loaderсуществуетbabel-coreуже есть одинpeerDependency, так что этот просто превращает его в@babel/core. Это изменение предотвращает попытки установить неправильную версию этих пакетов Babel.

для вbabel-coreуже естьpeerDependencyи инструменты, не готовые к серьезным обновлениям (поскольку изменение зависимости от одноранговых узлов является критическим изменением), мы выпустили новую версиюbabel-coreвнести изменения в новую версиюbabel-core@7.0.0-bridge.0. Для получения дополнительной информации см.Эта проблема.

похожий, какgulp-babel,rollup-plugin-babelОжидание посылки поставленоbabel-coreкак зависимость. Теперь это будут только@babel/coreТамpeerDependency. Из-за этого эти пакеты не должны быть в@babel/coreОбновление основных версий при изменении API

#5224: Независимая публикация экспериментальных пакетов

я здесьСтатус ВавилонаизVersioning部分提到过这个。 вотGithub Issue.

Возможно, вы помните, что после Babel 6 Babel стал набором пакетов npm с собственной экосистемой с пользовательскими пресетами и плагинами.

Однако с тех пор мы используем «фиксированную/синхронизированную» систему версий (поэтому нет пакетов версии 7.0 или выше). Когда мы делаем новый релиз, напримерv6.23.0, только пакеты, исходный код которых был обновлен, будут выпущены с новой версией. Остальная часть пакета оставлена ​​как есть. Это в основном работает на практике, поскольку мы используем в нашем пакете^.

К сожалению, когда для пакета необходимо выпустить основную версию, система такого типа требует выпуска для всех пакетов. Это либо означает, что мы делаем много мелких критических изменений (без необходимости), либо это означает, что мы упаковываем множество критических изменений в релиз. Вместо этого мы хотим отделить экспериментальные пакеты (этап 0 и т. д.) от всех остальных (es2015).

По этой причине мы намерены перебирать основные версии всех экспериментальных плагинов при изменении спецификации, а не просто ждать обновления всего Babel. Таким образом, все, что предшествует Этапу 4, будет открыто для критических изменений в виде итераций основных версий. Сами пресеты сцены одинаковые (если не выбрасывать их все).

С этим приходит наша просьба, чтобы предложение TC39 использовало-proposal-Учитывая решение о названии, мы сделаем итерацию основной версии плагина и предустановки, к которой он принадлежит (вместо просто версии патча, которая может разочаровать). Затем нам нужно отказаться от старой версии и создать структуру, которая будет автоматически обновляться, чтобы держать людей в курсе, независимо от того, какой станет спецификация (и не дать им застрять на чем-то. Нам не так повезло, как декораторам). .).

.babelrcсерединаenvопция не устарела

В отличие отпоследний коммит, мы только что исправили поведение слияния, чтобы оноболее совместимый

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

{  presets: [    ['env', { modules: false}],  ],  env: {    test: {      presets: [         'env'      ],    }  },}

имеютBABEL_ENV=test, который заменит конфигурацию корневой среды тестовой конфигурацией без параметров.

служба поддержки[class A extends Array](https://twitter.com/left_pad/status/940723982638157829)(самое раннее предупреждение)

Babel автоматически включает такие вещи, какArray,Errorа такжеHTMLElementсобственные встроенные модули, поэтому это вступит в силу при компиляции классов.

скорость

предустановленная среда:"useBuiltins"："usage"

babel-preset-envВвел идею составления грамматик для разных целей. Он также представляетuseBuiltInsвариант, возможность добавлять неподдерживаемые полифиллы только в цель.

Таким образом, с этим вариантом такие вещи, как:

import "babel-polyfill";

может стать

import "core-js/modules/es7.string.pad-start";import "core-js/modules/es7.string.pad-end";// ...

Если целевая среда поддерживаетpadStartилиpadEndвнешние полифиллы.

Но чтобы сделать его лучше, мы должны включать только те полифиллы, которые «используются» самой кодовой базой. если он не используется в кодеpadStart, зачем ввели?

"useBuiltins": "usage"была наша первая попытка решить эту идею. Он выполняет импорт в начале каждого файла, но добавляет ссылку только тогда, когда обнаруживает, что она используется в коде. Эта реализация означает, что мы можем ввести минимально необходимые полифиллы для приложения (и только если целевая среда это не поддерживает).

поэтому, если вы используете в своем кодеPromise, который представит его в начале файла (если ваша цель не поддерживает его). Если это дубликат, Bundlers удалит дубликат, поэтому эта реализация не приведет к множественным ссылкам на полифиллы.

import "core-js/modules/es6.promise";var a = new Promise();

import "core-js/modules/es7.array.includes";[].includesa.includes

С помощью вывода типа мы можем узнать, что.includesЯвляется ли экземпляр массивом. Можно получить ложное срабатывание, пока логика не станет лучше, потому что это все же лучше, чем введение всего полифилла раньше.

другие обновления

Что делать перед публикацией

  • Handle [.babelrc](https://github.com/babel/babel/issues/6766) lookup(хочу сделать это до первого релиза RC)
  • "отменяет" поддержку: Дифференциальная конфигурация на основе глобального режима
  • Логика кэширования и аннулирования в babel-core
  • Лучшие истории вокруг внешних помощников.
  • Реализовать его или иметь зрелый план итерации и обработки независимо от хелперов, поэтому мы явно не привязаны к core-js 2 или 3. У людей могут быть вещи, которые зависят от одного или другого, и они не хотят слишком сильно загружать оба одновременно.
  • является ли этоРеализация рабочего декоратора, или реализация функционального наследия, которая имеет четкий путь для реализации поведения текущего стандарта на протяжении жизни 7.x.

благодарный

Поздравления нашей волонтерской команде:

LoganУже усердно работаем над исправлением многих наших основных проблем с конфигурацией и многим другим. Он был тем, кто сделал всю тяжелую работу.

BrianВзял на себя много обслуживания предустановленной среды, независимо от того, что я делал раньше 😛

DanielВсегда помогайте, когда нам нужна помощь, будь то поддержка babel-loader или помощь в переносе библиотеки babylon/babel-preset-env. такой же,Nicolo,Sven,Artemа такжеDiogo, помогли сделать больше в предыдущем году.

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

Если я чему-то научился в этом году, я действительно должен следовать этому совету, а не просто записывать его.

Спасибо такжеMarikoизподтолкнуть, который фактически завершил этот выпуск (два месяца в производстве).

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории