Как заставить webpack принимать необязательные цепочки без babel

Сценарий:

  • Мы используем webpack 4 для создания пакета из наших источников Javascript.
  • Мы не используем Babel, потому что мы разрабатываем только для одной платформы (последняя версия Chrome), и мы используем только функции, непосредственно доступные в Chrome, поэтому транспиляция не требуется.

Плюс в этом - меньший размер и гораздо более быстрое выполнение разработки.

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

Я пытался погуглить, и все, что мне удалось найти, это то, что У babel есть плагин для этого.

Вопрос: есть ли способ заставить webpack принимать этот синтаксис, опуская babel?

Вот что сейчас сообщает webpack:

ERROR in ./src/js/components/custom-select.js 245:12
Module parse failed: Unexpected token (245:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      */
|     focus() {
>         this.input?.focus();
|         return this;
|     }
 @ ./src/js/components/components.js 16:0-49 16:0-49

webpack javascript optional-chaining
person connexo    schedule 29.01.2020    source источник
comment
Соответствующая проблема: github.com/webpack/webpack/issues/10216   -  person Klaycon    schedule 29.01.2020
comment
В веб-пакете синтаксического анализатора реализованы только функции этапа 4, необязательная цепочка по-прежнему является этапом 3. Похоже, они не заинтересованы в поддержке этого конкретного варианта использования (функции этапа 3 без перехода на более раннюю версию).   -  person Klaycon    schedule 29.01.2020
comment
@Klaycon Необязательное связывание - это этап 4. github.com/tc39/ предложение-необязательная-цепочка   -  person connexo    schedule 29.01.2020
comment
Совершенно верно, мои извинения. Acorn (синтаксический анализатор, используемый веб-пакетом) имеет здесь открытый пул-реквест для дополнительного связывания: github.com/ acornjs / acorn / pull / 891   -  person Klaycon    schedule 29.01.2020
comment
@Klaycon Похоже, вы можете сделать это приемлемым ответом.   -  person connexo    schedule 29.01.2020

Ответы (3)


arrow_upward
5
arrow_downward

Что касается ответа @Klaycon, Acorn сегодня выпустил новая версия, которая поддерживает необязательное связывание. Как только Webpack отразит изменение на своей стороне, использование дополнительной цепочки с webpack больше не должно быть проблемой.

person user3378165    schedule 11.06.2020
comment
Проблема для этого отслеживается здесь: github.com/webpack/webpack/issues/10227 - person I'll Eat My Hat; 14.06.2020

arrow_upward
6
arrow_downward

Согласно этой аналогичной проблеме, webpack полагается на синтаксический анализатор Acorn и, следовательно, предположительно, ему сначала нужен Acorn для поддержки необязательного связывания. В Acorn есть здесь открытый запрос на перенос для дополнительного связывания, но пока что " решение ", предложенное пользователем в первой проблеме, заключается в отключении синтаксического анализа файлов, которые вам нужны, необязательно с помощью module.noParse до тех пор, пока Acorn и webpack не будут поддерживать эту функцию.

Обновление. Дополнительное связывание теперь поддерживается в Acorn с v7.3.0 и в соответствии с этим комментарием к проблеме веб-пакета, похоже, они не ожидают, что веб-пакет будет поддерживать его до тех пор, пока не будет выпущен веб-пакет 5. Прогресс до webpack 5 можно отслеживать здесь.

person Klaycon    schedule 29.01.2020
comment
К сожалению: Игнорируемые файлы не должны иметь вызовов import, require, define или любого другого механизма импорта. У нас, конечно, есть imports, поэтому единственное, что я могу сделать на этом этапе, - это дождаться этого запроса. запрос на объединение, затем подождите, пока webpack обновится до этой новой версии acorn. - person connexo; 29.01.2020

arrow_upward
1
arrow_downward

Оказывается, дополнительное связывание не будет поддерживаться одним только Webpack 4, однако оно уже поддерживается в Webpack 5, поэтому, если это возможно, лучше всего было бы перейти на Webpack 5.

В противном случае, если вы не можете выполнить обновление до Webpack 5, вам следует использовать Babel (@ babel / plugin-offer-optional-chaining) или компилятор TypeScript (target не более ES2019) для дополнительной трансляции с цепочкой.

person Slava Fomin II    schedule 01.03.2021
comment
Я думаю, вы имели в виду es2019 - person Milan Velebit; 08.04.2021
comment
@MilanVelebit, спасибо, что заметили опечатку! Не стесняйтесь редактировать ответы других людей, если вы обнаружите подобные проблемы;) - person Slava Fomin II; 14.04.2021