📚 API

Bundler

Замість CLI ви також можете використовувати API для ініціалізації пакувальника для більш просунутих варіантів використання (наприклад, для користувача обробка після кожної збірки). Див. Приклад нижче, де пояснюється кожна опція:

const Bundler = require('parcel-bundler');
const Path = require('path');

// Шлях до файлу точки входу
const file = Path.join(__dirname, './index.html');

// Опції пакувальника (Bundler)
const options = {
  outDir: './dist', // Каталог для файлів збірки, за замовчуванням - dist
  outFile: 'index.html', // Ім'я вихідного файлу
  publicUrl: '/', // Шлях, який обслуговує сервер, за замовчуванням - '/'
  watch: true, // чи слід відстежувати зміни файлів і збирати заново їх при зміні, за замовчуванням - process.env.NODE_ENV! == 'production'
  cache: true, // Включає або відключає кешування, за замовчуванням - true
  cacheDir: '.cache', // Каталог кешування, за замовчуванням .cache
  minify: false, // Мініфікувати файли, включено якщо process.env.NODE_ENV === 'production'
  target: 'browser', // browser / node / electron, за замовчуванням - browser
  https: false, // Використовувати захищене з'єднання (https) для файлів, за замовчуванням - false
  logLevel: 3, // 3 = Логувати все, 2 = Логувати попередження і помилки, 1 = Логувати помилки
  hmrPort: 0, // Порт на якому працює сокет hmr, за замовчуванням - випадковий вільний порт (0 в node.js визначає випадковий вільний порт)
  sourceMaps: true, // Включити або відключити sourcemaps, за замовчуванням включено (поки ще не підтримується в мініфікованих збірках)
  hmrHostname: '', // Ім'я хоста для модуля гарячого перезавантаження, за замовчуванням - ''
  detailedReport: false // Роздруковує докладний звіт про бандл, ресурси, розміри файлів і часу, за замовчуванням - false, звіти роздруковуються, якщо watch відключений
};

async runBundle () {
  // Ініціалізація пакувальника, використовуючи розташування точки входу і надані опції
  const bundler = new Bundler (file, options);

  // Запускає пакувальник і повертає головну збірку
  // Використовуйте події, якщо ви використовуєте режим watch, оскільки цей проміс запускається тільки один раз, а не при кожній перезбірці
  const bundle = await bundler.bundle ();
}

runBundle();

Події

Список усіх подій пакувальника

• Bundled викликається після того, як Parcel успішно завершив збірку, основний бандл передається в коллбек

const bundler = new Bundler (...);
bundler.on ('bundled', (bundle) => {
   // пакувальник містить всі ресурси і бандли, подробиці дивіться в документації
});

• BuildEnd викликається після кожної збірки, він також викликається в разі помилки

const bundler = new Bundler (...);
bundler.on ('buildEnd', () => {
   // Зробити щось
});

Bundle

Bundle - це те, що Parcel використовує для створення бандла з ресурсів, він також містить дочірні і родинні бандли для створення дерева бандлів.

Properties

• Type: Тип ресурсів, які він містить (наприклад, js, css, map, ...)
• Name: Ім'я бандла (згенеровані за допомогоюAsset.generateBundleName () ` entryAsset `)
• ParentBundle: Батьківський бандл, null в разі вхідного бандла
• EntryAsset: Точка входу бандла, використовується для генерації імені збірки ресурсів.
• Assets: Набір (Set) всіх ресурсів всередині бандла
• ChildBundles: Набір (Set) всіх дочірніх бандлів
• SiblingBundles: Набір (Set) всіх споріднених бандлів
• SiblingBundlesMap: Карта (Map <String (Type: js, css, map, ...), Bundle>) всіх дочірніх бандлів
• Offsets: Карта (Map <Asset, number (line number inside the bundle)>) всіх місць розташування ресурсів всередині бандла, використовуваних для генерації всіх точних source maps

Tree

Бандл (Bundle) містить батьківський бандл (parentBundle), дочірній бандл (childBundles) і споріднений бандл (siblingBundles), всі ці властивості разом створюють швидке дерерво бандлів для ітерації.

Дуже простий приклад дерева ресурсів і його згенерованого дерева бандлів

Дерево ресурсів:

index.html потребує index.js і index.css.

index.js потребує test.js і test.txt

index.html
-- index.js
 |--- test.js
 |--- test.txt
-- index.css

Bundle Tree:

Index.html використовується як вхідний ресурс для основного бандла, цей основний бандл створює два дочірні бандли: один дляindex.js і другий для index.css, тому що обидва вони відрізняються від типуhtml.

Index.js вимагає два файли,test.js і test.txt.

Test.js додається до ресурсів бандлаindex.js, оскільки він має той же тип, що і index.js

Test.txt створює новий бандл і додається як дочірній бандлindex.js, оскільки це інший тип ресурсу, ніж index.js

Index.css нічого не вимагає, отже, містить тільки вхідні ресурси.

Index.css іindex.js - споріднені бандли для один одного, оскільки вони мають один і той же батьківський елемент.

index.html
-- index.js (включає index.js і test.js)
 |--- test.txt (включає test.txt)
-- index.css (включає index.css)

Мідлвар

Мідлвар (middleware) може використовуватися для підключення до HTTP-сервера (наприклад, express або nodehttp).

Приклад використання мідлвар Parcel з express

const Bundler = require ( 'parcel-bundler');
const app = require ( 'express') ();

const file = 'index.html'; // Передайте абсолютний шлях до точки входу тут
const options = {}; // Див. Розділ опцій API, для перегляду можливостей

// Ініціалізація нового пакувальника з використанням файлу і опцій
const bundler = new Bundler (file, options);

// Шлях express використовує мідлвар пакувальника, це дозволить Parcel обробляти кожен запит до вашого сервера express
app.use (bundler.middleware ());

// Сервер прослуховує порт 8080
app.listen (8080);

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.