Что такое поле модуля?

Поле модуля в package.json указывает точку входа для ESM (модули ES6). В отличие от основного поля, которое предназначено для модулей CommonJS (require()), модуль используется для сред, поддерживающих новый стандарт ESM, например сборщики JavaScript (Webpack, Rollup). и браузеры, использующие синтаксис импорта.

Почему модуль важен?

Поле модуля появилось потому, что сборщики JavaScript, такие как Webpack и Rollup, хотели оптимизировать пакеты, использующие формат ESM. У ESM есть такие преимущества, как встряхивание дерева (удаление неиспользуемого кода) и статический анализ (более эффективный анализ зависимостей). Поле модуля сообщает сборщикам пакетов, где находится версия пакета ESM, что позволяет им выполнить эту оптимизацию.

Чем он отличается от основного:

• Main предназначен для CommonJS (старый формат), используемого Node.js с require().
• Модуль предназначен для ESM (современный формат), используемого сборщиками пакетов и средами, поддерживающими синтаксис импорта.

Пример:

Если вы отправляете пакет, который поддерживает как CommonJS, так и ESM, вы можете использовать как основной, так и модуль:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",  // Entry for CommonJS (Node.js)
  "module": "esm/index.js"  // Entry for ESM (Bundlers, Modern Environments)
}

Когда используется модуль?

• Бандлеры: когда такие инструменты, как Webpack, Rollup или Parcel, объединяют ваш код, они ищут поле модуля, чтобы использовать версию ESM вашего пакета, которую можно оптимизировать лучше, чем CommonJS.
• Современные среды: Браузеры и другие среды, поддерживающие собственный синтаксис импорта, также могут ссылаться на поле модуля.

Почему бы просто не использовать main?

• Main предназначен для обратной совместимости с Node.js и системой CommonJS. Node.js не использует поле модуля; он опирается на main для require().
• Модуль специально предназначен для современной системы ESM и именно его ищут сборщики для оптимизации импорта.

Пример разбивки:

{
  "main": "index.js",   // Entry point for CommonJS, Node.js uses this
  "module": "esm/index.js"  // Entry point for ES modules, bundlers use this
}

• Если кто-то использует require('my-package'), Node.js загрузит index.js (CommonJS).
• Если кто-то использует импорт «мой-пакет», сборщик будет искать esm/index.js (ESM).

Важно отметить:

• Node.js изначально не использует поле модуля (он использует только main для обратной совместимости).
• Компондеры JavaScript предпочитают модуль, поскольку он указывает на версии модуля ES вашего пакета.

Краткое содержание:

• Используйте main для Node.js (CommonJS).
• Используйте модуль для современных сред JavaScript (ESM) и сборщиков.
• Если вы хотите поддерживать оба поля, включите оба поля в свой package.json.

Поможет ли это вам прояснить путаницу по поводу поля модуля?