Я видел, как разработчики изо всех сил пытались создать библиотеку из своего машинописного проекта. Вот краткое изложение статьи. Я храню эту таблицу в своей мышечной памяти.
Примечание. Нам нужен пакет только для браузеров. Нам просто нужны транспилированные (.js) файлы, соответствующие каждому файлу машинописного текста.
Читайте ниже, чтобы понять, как я пришел к таблице выше.
Определить среду/вариант использования
Попытайтесь определить, как будет использоваться ваша библиотека. Существует три среды, в которых ваша библиотека может быть использована:
- В проекте NodeJS — нужны исходные карты для отладки, файлы .d.ts для IntelliSense в редакторах кода.
- Во внешнем проекте, таком как react, vue, angular — нужны исходные карты для отладки, файлы .d.ts для IntelliSense в редакторах кода.
- В браузере с помощью тега 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/
Текст жирный в приведенном выше фрагменте кода на самом деле является глобальной переменной, созданной библиотекой, которую вы импортировали с помощью первого тега скрипта.
Определить синтаксис упакованной библиотеки
Есть две вещи, которые вам нужно учитывать для каждого из трех вариантов использования:
- Тип модуля. Решите, ожидает ли среда, в которой будет использоваться ваша библиотека, оператор import/export (он же модуль ES) или require/module.exports (он же модуль CommonJS).
- Тип синтаксиса — решите, будет ли среда, в которой будет использоваться ваша библиотека, использовать синтаксис ES5 (в браузерах, старых версиях Node) или ES6+.
Понимать особенности каждой среды
Узел
Узел (≥v13) — определяет тип модуля файла либо по расширению файла:
Если .mjs, то Node рассматривает его как модуль, использующий импорт/экспорт.
Если pacakge.json имеет «тип»: «модуль», Node рассматривает все файлы, заканчивающиеся расширением, как .js/.mjs модуль, который использует импорт/экспорт.
Во всех остальных случаях Node будет ожидать, что файлы будут использовать require/module.exports.
Браузеры
Браузеры могут понимать модули AMD с помощью таких библиотек, как RequireJS. Модули UMD можно использовать как в узле, так и в браузерах. Файлы, которые вам, возможно, придется изменить
Файлы, которые следует учитывать при упаковке
Принятые решения помогут указать следующие поля в файле tsconfig.json:
- цель — es5/es6
- модуль — commonjs/es6
Вам также может понадобиться добавить следующее поле в файл package.json упакованной библиотеки:
"type": "module"