📦 Ассеты

Parcel основан на ассетах. Ассеты могут представлять любой файл, но Parcel имеет особую поддержку для определенных видов ассетов, таких как: JavaScript, CSS и файлов HTML. Parcel автоматически анализирует зависимости, указанные в этих файлах и включает их в выходной бандл. Ассеты аналогичных типов сгруппированы в один и тот же выходной бандл. Если вы импортируете ассет другого типа (например, если вы импортировали файл CSS из JS), он запускает дочерний бандл и оставляет ссылку на него в родительском. Это будет показано в следующих разделах.

JavaScript

Наиболее традиционным типом файлов для веб бандлов является JavaScript. Parcel поддерживает синтаксис модуля CommonJS и ES6 для импорта файлов. Он также поддерживает динамический синтаксис функции import() для асинхронного загрузки модулей, который обсуждается в разделе Разделение кода.

// Импортировать модуль с использованием синтаксиса CommonJS
const dep = require('./path/to/dep');

// Импорт модуля с использованием синтаксиса импорта ES6
import dep from './path/to/dep';

Вы также можете импортировать ассеты без JavaScript из файла JavaScript, например CSS или даже файл изображения. Когда вы импортируете один из этих файлов, он не привязан, как в некоторых других упаковщиках. Вместо этого он помещается в отдельный бандл (например файл CSS) наряду со всеми его зависимостями. Когда вы используете CSS Modules, экспортированные классы помещаются в JavaScript бандл. Другие типы ассетов экспортируют URL-адрес в выходной файл в JavaScript бандле, чтобы вы могли ссылаться на них в своем коде.

// Импортировать файл CSS
import './test.css';

// Импортировать файл CSS с помощью CSS-модулей
import classNames from './test.css';

// Импортировать URL-адрес в файл изображения
import imageURL from './test.png';

Если вы хотите встроить файл в пакет JavaScript вместо ссылки по URL-адресу, вы можете использовать для этого API-интерфейс Node.js fs.readFileSync. URL-адрес должен быть статически анализируемым, то есть он не может иметь никаких переменных (кроме, как __dirname и __filename).

import fs from 'fs';

// Чтение содержимого в виде строки
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8');

// Чтение содержимого в виде буфера
const buffer = fs.readFileSync(__dirname + '/test.png');

CSS

Ассеты CSS могут быть импортированы из файла JavaScript или HTML и могут содержать зависимости, на которые ссылается синтаксис @import, а также ссылки на изображения, шрифты и так далее, с помощью функции url(). Другие файлы CSS из @import, встраиваются в один и тот же набор CSS и url() ссылки переписываются на их выходные имена файлов. Все имена файлов должны относиться к текущему файлу CSS.

/* Импортировать другой файл CSS */
@import './other.css';

.test {
  /* Ссылка на файл изображения */
  background: url('./images/background.png');
}

Помимо простого CSS, также поддерживаются и другие языки с компилятором, такие как LESS, SASS и Stylus. Они работают одинаково.

SCSS

Компиляция SCSS требует модуля node-sass. Установите его через npm:

npm install node-sass

Как только node-sass установится, вы можете импортировать SCSS файлы в JavaScript файлах.

import './custom.scss'

Зависимости в файлах SCSS можно использовать с операторами @import.

HTML

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

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

  <a href="./other.html">Ссылка на другую страницу</a>

  <!-- импортируем JavaScript бандл -->
  <script src="./index.js"></script>
</body>
</html>