Работа с несколькими точками входа в Rollup используется в случаях, когда проект необходимо собрать в несколько независимых бандлов, каждый из которых имеет собственный граф зависимостей. Это отличается от классического сценария с одной точкой входа, где весь код приложения собирается в единый файл.
В Rollup точка входа определяет стартовый модуль, от которого строится граф зависимостей. При использовании нескольких точек входа создаётся несколько графов, либо один общий граф с несколькими корнями, в зависимости от конфигурации.
Ключевая идея заключается в том, что каждая entry point становится отдельным корнем дерева зависимостей.
Основные сценарии использования:
Самый простой способ — передать массив строк в поле input.
export default {
input: [
'src/main.js',
'src/admin.js',
'src/widget.js'
],
output: {
dir: 'dist',
format: 'esm'
}
};В этом случае Rollup создаст отдельный бандл для каждого входного файла.
Результат:
Объект позволяет явно задать имена выходных файлов.
export default {
input: {
main: 'src/main.js',
admin: 'src/admin.js',
widget: 'src/widget.js'
},
output: {
dir: 'dist',
format: 'esm'
}
};Здесь ключи объекта становятся именами чанков.
Результат:
Такой подход предпочтителен, когда важен контроль над именованием выходных файлов.
При множественных entry points Rollup анализирует зависимости следующим образом:
Если несколько entry points используют один модуль:
// src/utils.js
export const sum = (a, b) => a + b;// src/main.js
import { sum } from './utils.js';// src/admin.js
import { sum } from './utils.js';Rollup может:
Функция manualChunks позволяет управлять тем, как общие зависимости распределяются между чанками.
export default {
input: {
main: 'src/main.js',
admin: 'src/admin.js'
},
output: {
dir: 'dist',
format: 'esm',
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
};Эффект:
Rollup применяет следующие правила:
При множественных входах Rollup:
output: {
dir: 'dist',
format: 'esm'
}output: {
dir: 'dist',
format: 'cjs'
}При использовании IIFE или UMD:
При использовании dir output Rollup генерирует файлы автоматически.
output: {
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'chunks/[name]-[hash].js'
}[name] соответствует ключу entry point или имени модуля.
Если один и тот же файл указан как entry point и импортируется другими модулями:
input: {
main: 'src/main.js',
shared: 'src/shared.js'
}И при этом:
import './shared.js';Rollup может:
Dynamic import усиливает разделение графа:
import('./admin.js');
import('./widget.js');Даже при наличии нескольких entry points Rollup создаёт дополнительные async chunks.
Особенность:
Некоторые плагины ведут себя по-разному при multi-entry сборке.
Причина:
Причина:
Причина:
Каждый entry должен:
Часто используется структура:
Пример:
Каждый работает независимо, но использует общий слой utils.
input: {
index: 'src/index.js',
es: 'src/es.js',
cjs: 'src/cjs.js'
}Каждый entry соответствует разному формату потребления.
input: {
header: 'src/header.js',
footer: 'src/footer.js',
dashboard: 'src/dashboard.js'
}Каждый модуль может разворачиваться отдельно.
Entry points представляют плагины: