Пакет Webpack 5 Библиотека компонентов React для браузера ⇐ Javascript

[Гость]

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

Я могу использовать webpack-node-externals, чтобы избежать объединения пакетов npm, но это вынуждает Webpack использовать commonjs в пакете.

У меня есть минимальный рабочий пример. Имейте в виду, что в этой библиотеке я могу использовать множество пакетов npm, а не только "реагировать".
. ├── расст./ ├── index.tsx ├── package.json ├── tsconfig.json └── webpack.config.ts
./package.json

{ "name": "реагировать-компоненты", "версия": "0.0.1", "зависимости": { "реагировать": "^18.2.0" }, "devDependency": { "@types/react": "^18.2.22", "ts-loader": "^9.4.4", "ts-node": "^10.9.1", "tslib": "^2.6.2", "машинописный текст": "^5.2.2", "webpack": "^5.88.2", "webpack-cli": "^5.1.4", "webpack-node-externals": "^3.0.0" } } ./index.tsx

import React, { HTMLProps } из 'реагировать'; интерфейс Props расширяет HTMLProps { дети: React.ReactNode; } экспортировать константу H1: React.FC = ({ Children, ...props }) => {дети; ./tsconfig.json

{ "Параметры компилятора": { "outDir": "./dist", "jsx": "реагировать", «esModuleInterop»: правда, «декларация»: правда }, "включить": ["index.tsx"] } ./webpack.config.ts
импортировать путь из "path"; импортировать nodeExternals из «webpack-node-externals»; модуль.экспорт = { запись: "./index.tsx", выход: { путь: path.resolve(process.cwd(), "dist"), чистый: правда, }, цель: «сеть», внешние: [nodeExternals()], решать: { расширения: [".ts", ".tsx"], }, модуль: { правила: [ { тест: /\.(ts|tsx)$/, используйте: ["ts-loader"], исключить: /node_modules/, }, ], }, };