Настройка Webpack / Babel

Урок 1

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

Урок 1

Настройка Webpack / Babel без воды

Если зайти в официальную документацию WordPress по Gutenberg, то можно заметить, что код в ней в основном представлен в двух синтаксисах:

Синтаксис JavaScript ES5 и ESNEXT (JSX)

Сразу могут возникнуть вопросы – а в чём разница? Какой лучше использовать?

Когда Gutenberg только появился (а точнее стал частью WordPress), это был декабрь 2018, его уже нельзя было игнорировать. И не знаю с чем это связано, но почему-то с 1-го января любого года у меня появляется большое количество энергии, чтобы делать что-то новое. И делать много. И вот в январе 2019 я уже полностью освоил создание блоков для Gutenberg и других модулей для него на… чистом JavaScript ES5. Если сказать, что код получается некрасивый – ничего не сказать. Поэтому рано или поздно, разрабатывая под Gutenberg, приходишь к пониманию того, что надо настраивать сборку, и кодить нормально на JSX.

Но дело в том, что если просто добавить синтаксис JSX в свой JavaScript код, то браузер не сможет его интерпретировать и поэтому придётся использовать сборку. Cборки проектов для WordPress чаще всего осуществляются на Webpack.

Что будет в этом уроке

  • Установим и настроим Webpack.
  • Настроим Babel для преобразования JSX кода в JavaScript.

Для того, чтобы скачать мой webpack.config.js, нужно приобрести курс.