🐠 Трансформации

Хотя многие коммутаторы требуют установки и настройки плагинов для трансформации ассетов, Parcel имеет поддержку многих распространенных трансформаций и транспайлеров из коробки. Вы можете трансформировать JavaScript, используя Babel, CSS с помощью PostCSS и HTML через PostHTML. Parcel автоматически запускает эти трансформации, когда находит файл конфигурации (например, .babelrc, .postcssrc) в модулях.

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

Babel

Babel является популярным транспайлером для JavaScript с большой экосистемой плагинов. Использование Babel с Parcel работает так же, как использование его отдельно или с другими упаковщиками.

Установка пресетов и плагинов в приложении:

yarn add babel-preset-env

Далее, создайте .babelrc:

{
  "presets": ["env"]
}

PostCSS

PostCSS является инструментом для преобразования CSS с плагинами, например autoprefixer, cssnext и CSS Modules. Вы можете настроить PostCSS с помощью Parcel, создав файл конфигурации, используя одно из следующих имен: .postcssrc (JSON), .postcssrc.js или postcss.config.js.

Установка плагинов в приложении:

yarn add postcss-modules autoprefixer

Далее, создайте .postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

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

Целевые браузеры для Autoprefixer, cssnext и других подобных инструментов, указываются в файле .browserslistrc:

> 1%
last 2 versions

Модули CSS поддерживаются несколько иначе, используя верхний уровень ключей modules. Это связано с тем, что Parcel нуждается в специальной поддержке CSS-модулей, поскольку они экспортируют объект, который также будет включен в JavaScript бандл. Обратите внимание, что вам все равно необходимо установить postcss-modules в ваш проект.

PostHTML

PostHTML является инструментом для преобразования HTML с плагинами. Вы можете настроить PostHTML с помощью Parcel, создав файл конфигурации, используя одно из следующих имен: .posthtmlrc (JSON), posthtmlrc.js или posthtml.config.js.

Установка плагинов в приложении:

yarn add posthtml-img-autosize

Далее, создайте .posthtmlrc:

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

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