`browser` VS `module` VS `main`

используется во фронтенд-разработкеnpmУпаковка, которую можно считать банальной, и использованиеnpmПакет всегда на связиpackage.jsonФайл конфигурации пакета.

Тогда здесь есть проблема, когда мы находимся в разных средахimportОдинnpmпакет, что загружается в концеnpmКакой файл пакета?

Старые водители быстро дали ответ:mainФайл, указанный в поле.

Однако мы знаемnpmПакет фактически делится на:

Разрешено только на стороне клиента,
Разрешено использовать только серверу,
Можно использовать как браузер/сервер.

Если нам нужно разработатьnpmПакет совместим как с веб-, так и с серверной частью,Различные входные файлы для пакетов npm необходимо загружать в разных средах., очевидно,mainПоле уже не может удовлетворить наши потребности, которые выводятсяmoduleа такжеbrowserполе.

В этой статье будут рассмотрены сценарии использования этих полей и приоритет между ними, когда эти поля существуют одновременно.

приоритет файла

говорящийpackage.jsonПеред этим поговорим о приоритете файла

Поскольку мы используем две спецификации модуля, ESM и commonJS, для собственного выполнения файлов сценариев спецификации ESM в среде узла,.mjsФайл появился.

когда естьindex.mjsа такжеindex.jsКогда такие файлы с одинаковым именем и разными суффиксами,import './index'илиrequire('./index')будет загружен первымindex.mjsфайл.

То есть приоритетmjs > js

`browser`,`module`а также`main`поле

определение поля

main: ОпределенныйnpmВходной файл пакета, можно использовать как среду браузера, так и среду узла.
module: ОпределениеnpmВходной файл спецификации ESM пакета, который можно использовать как в среде браузера, так и в среде узла.
browser: ОпределениеnpmВходной файл, упакованный в среде браузера

Сценарии использования и приоритеты

Во-первых, мы предполагаемnpmМешокtestимеет следующую структуру каталогов

----- lib
   |-- index.browser.js
   |-- index.browser.mjs
   |-- index.js
   |-- index.mjs

в*.jsфайлы используют синтаксис спецификации commonJS (require('xxx')),*.mjsэто синтаксис спецификации ESM (import 'xxx')

Его файл package.json:

  "main": "lib/index.js",  // main 
  "module": "lib/index.mjs", // module

  // browser 可定义成和 main/module 字段一一对应的映射对象，也可以直接定义为字符串
  "browser": {
    "./lib/index.js": "./lib/index.browser.js", // browser+cjs
    "./lib/index.mjs": "./lib/index.browser.mjs"  // browser+mjs
  },

  // "browser": "./lib/index.browser.js" // browser

Согласно приведенной выше конфигурации, то на самом деле нашpackage.jsonУказанная запись может иметь

main
module
browser
browser+cjs
browser+mjs

эти 5 случаев.

Конкретные сценарии использования описаны ниже.

webpack + web + ESM

Это наш самый распространенный вариант использования,webpackДля упаковки и сборки нашего веб-приложения синтаксис модуля использует ESM.

когда мы загружаем

import test from 'test'

Фактический приоритет загрузкиbrowser = browser+mjs > module > browser+cjs > main
То есть webpack будет искать файл, указанный в поле, в соответствии с этим порядком, пока не найдет его.

Однако реальная ситуация может оказаться более сложной.Подробности см. в блок-схеме.

webpack + web + commonJS

const test = require('test')

На самом деле, при создании веб-приложений используйтеESMилиcommonJSСпецификация модуля не влияет на приоритет загрузки

приоритет по-прежнемуbrowser = browser+mjs > module > browser+cjs > main

webpack + node + ESM/commonJS

Мы знаем, что при создании проекта с помощью веб-пакетаtargetВариант, по умолчанию — web, то есть для сборки веб-приложения.

Когда нам нужно построить некоторые изоморфные проекты или другие проекты узлов, нам нужноwebpack.config.jsизtargetпараметры установлены наnodeстроить.

import test from 'test'
// 或者 const test = require('test')

Приоритет:module > main

node + commonJS

пройти черезnode test.jsВыполнить скрипт напрямую

const test = require('test')

Допустимо только основное поле.

node + ESM

пройти через--experimental-modulesСценарий, который позволяет узлу выполнять спецификацию ESM (должен быть суффикс файла mjs)
`node --experimental-modules test.mjs

import test from 'test'