GitHub

HTML

Поддерживаемые расширения: htm, html

Ресурсы HTML часто являются входными файлами, которые вы предоставляете в Parcel, но на них также могут ссылаться файлы JavaScript, например размещая ссылки на другие страницы. URL скриптов, стилей, медиа и других HTML файлов извлекаются и компилируются, как описано выше. Ссылки переписываются в HTML, чтобы они ссылались на правильные файлы. Все имена файлов должны быть относительно текущего файла HTML.

<html>
  <body>
    <!-- ссылка на изображение -->
    <img src="./images/header.png" />

    <a href="./other.html">Link to another page</a>

    <!-- импорт JavaScript пакета -->
    <script src="./index.js"></script>
  </body>
</html>

Импорт HTML в JavaScript

Импорт HTML в JavaScript не включает статические HTML строки, но файлы HTML будут динамически извлекаться с помощью Fetch API. Для достижения поддержки Internet Explorer 11 и более старых браузеров необходимо использовать полифилы для Promise и fetch.

Импорт некомпилированных ресурсов

Поддерживается добавление ссылок на файлы, которые Parcel может компилировать (например JavaScript, TypeScript, SCSS, и т.д.) в HTML. Parcel автоматически обработает файлы и обновит ссылку, чтобы указать на скомпилированные ресурсы.

<html>
  <head>
    <!-- включает SCSS файл -->
    <link rel="stylesheet" href="./my-styles/style.scss" />
  </head>
</html>

PostHTML

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

Установите плагины в вашем приложении:

yarn add posthtml-img-autosize

Затем создайте .posthtmlrc:

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

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

При импорте модулей с использованием posthtml-modules, если вы начинаете пусть с / они станут относительно ./src.

htmlnano

Parcel автоматически обрабатывает все HTML ресурсы с помощью htmlnano, когда включена минификация. htmlnano может быть настроен в соответствии с его документацией с помощью .htmlnanorc (JSON) или .htmlnanorc.js файла, например:

{
  "removeComments": false
}

Помогите нам улучшить документацию

Если что-то отсутствует или не совсем понятно, пожалуйста опишите проблему в репозитории сайта или отредактируйте эту страницу.