Как поставлять минифицированную версию пакета вместе с основным?

Когда вы разрабатываете пакет с использованием npm, вы, вероятно, захотите предоставить пользователям две версии вашего пакета: одну в необработанном исходном коде для разработки и отладки, а вторую минифицированную версию для использования в боевой среде.

Есть несколько подходов к достижению этой цели, и рассмотрим два наиболее распространенных способа.

Использование инструментов сборки, таких как Webpack или Rollup:

Преимущество использования инструментов сборки заключается в том, что они позволяют вам автоматически собирать и минифицировать ваш пакет при сборке.

Установите инструмент сборки (например, webpack или rollup) и необходимые плагины:

npm install webpack webpack-cli

Создайте файл конфигурации для инструмента сборки, например, webpack.config.js, и определите в нем необходимые настройки:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-package.js',
    library: 'MyPackage',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  mode: 'production',
};

Добавьте скрипт сборки в ваш package.json:

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Создайте необходимые импорты и экспорты в вашем исходном коде:

// src/index.js
import { someFunction } from './utils';

export default {
  someFunction,
};

Запустите сценарий сборки:

npm run build

Это создаст минифицированную версию вашего пакета в папке dist.

Использование специальных npm-скриптов:

Если вы не хотите использовать инструменты сборки, вы можете воспользоваться возможностями npm-скриптов для создания минифицированной версии.

Установите необходимые инструменты для минификации, например, terser:

npm install terser --save-dev

В package.json добавьте скрипт для минификации вашего пакета:

"scripts": {
  "build": "rollup src/index.js --format umd --name MyPackage | terser -c -m -o dist/my-package.min.js"
}

Запустите скрипт сборки:

npm run build

Это создаст минифицированную версию вашего пакета в папке dist.

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