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

Примечание. Нам нужен пакет только для браузеров. Нам просто нужны транспилированные (.js) файлы, соответствующие каждому файлу машинописного текста.

Читайте ниже, чтобы понять, как я пришел к таблице выше.

Определить среду/вариант использования

Попытайтесь определить, как будет использоваться ваша библиотека. Существует три среды, в которых ваша библиотека может быть использована:

  1. В проекте NodeJS — нужны исходные карты для отладки, файлы .d.ts для IntelliSense в редакторах кода.
  2. Во внешнем проекте, таком как react, vue, angular — нужны исходные карты для отладки, файлы .d.ts для IntelliSense в редакторах кода.
  3. В браузере с помощью тега script. Способ, который вы собираетесь использовать в браузере, выглядит следующим образом:
<!DOCTYPE html>
<html>
  ...
  <script src="https://example.org/webpack-numbers.js"></script>
  <script>
    // ...
    // Global variable
    webpackNumbers.wordToNum('Five');
    // Property in the window object
    window.webpackNumbers.wordToNum('Five');
    // ...
  </script>
</html>
Source: https://webpack.js.org/guides/author-libraries/

Текст жирный в приведенном выше фрагменте кода на самом деле является глобальной переменной, созданной библиотекой, которую вы импортировали с помощью первого тега скрипта.

Определить синтаксис упакованной библиотеки

Есть две вещи, которые вам нужно учитывать для каждого из трех вариантов использования:

  1. Тип модуля. Решите, ожидает ли среда, в которой будет использоваться ваша библиотека, оператор import/export (он же модуль ES) или require/module.exports (он же модуль CommonJS).
  2. Тип синтаксиса — решите, будет ли среда, в которой будет использоваться ваша библиотека, использовать синтаксис ES5 (в браузерах, старых версиях Node) или ES6+.

Понимать особенности каждой среды

Узел

Узел (≥v13) — определяет тип модуля файла либо по расширению файла:

Если .mjs, то Node рассматривает его как модуль, использующий импорт/экспорт.

Если pacakge.json имеет «тип»: «модуль», Node рассматривает все файлы, заканчивающиеся расширением, как .js/.mjs модуль, который использует импорт/экспорт.

Во всех остальных случаях Node будет ожидать, что файлы будут использовать require/module.exports.

Браузеры

Браузеры могут понимать модули AMD с помощью таких библиотек, как RequireJS. Модули UMD можно использовать как в узле, так и в браузерах. Файлы, которые вам, возможно, придется изменить

Файлы, которые следует учитывать при упаковке

Принятые решения помогут указать следующие поля в файле tsconfig.json:

  1. цель — es5/es6
  2. модуль — commonjs/es6

Вам также может понадобиться добавить следующее поле в файл package.json упакованной библиотеки:

"type": "module"