GitHub

📦 Ресурсы

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')

// Чтение содержимого в качестве Buffer
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, также поддерживаются и другие компилируемые в CSS языки, такие как LESS, SASS и Stylus, которые работают подобным образом.

SCSS

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

npm install sass

После установки 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>

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

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