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 вимагає модуля 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>

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.