Add es modules build target

[OEvgeny]

Fixes #5024 Fixes #5011

Changelog Entry

Add the dist/webchat-esm.mjs distribution, to make WebChat easier to import in environments preferring ES modules

Description

Added a new build step into the bundle package for WebChat ESM target. It uses tsup producing the build in a single step.

The following configureation steps are taken:

• minify depending on environment
• ensure there are no big dependencies duplicated, via adding --hoist flag, and a plugin for microsoft-cognitiveservices-speech-sdk
• code splitting is disabled for now
• target browsers set to chrome 100, firefox 100, safari 15: y. 2021 - 2022.
• metafile emitted for debugging purposes
• enforce esm format
• react and react-dom are baked-in for now with isomorphic-* packages
• fix js files using JSX syntax to reflect usage, so esbuild won't fail on them
• fix NODE_ENV usage, so it gets stripped off from the final build

Design

Additional configuration for tsup was applied in order to inject isomorphic dependencies. I had to re-shuffle dependencies and devDependencies, to maintain the tsup convention about excluded from the bundle dependencies.

The esbuild bundler which is used by tsup will include every dependecy path into the resulting bundle if paths don't match.

There are two ways to work around it:

1. We hoist dependencies, so there's only one path (done in the PR)
2. We resolve all dependencies using a custom plugin to avoid duplication

Specific Changes

• Introduced tsup to bundle ESM distribution
• Added --hoist flag and updated .lock files
• Changed package version to match hoisted where possible
• Fixed NODE_ENV usage
• Renamed .js files using JSX syntax to .jsx
• Fixed Webpack config aliases to match hoisted deps paths
• Fixed isomorphic-react-dom package main entry

-

• [ ] I have added tests and executed them locally
• [ ] I have updated CHANGELOG.md
• [ ] I have updated documentation

Review Checklist

This section is for contributors to review your work.

• [ ] Accessibility reviewed (tab order, content readability, alt text, color contrast)
• [ ] Browser and platform compatibilities reviewed
• [ ] CSS styles reviewed (minimal rules, no z-index)
• [ ] Documents reviewed (docs, samples, live demo)
• [ ] Internationalization reviewed (strings, unit formatting)
• [ ] package.json and package-lock.json reviewed
• [ ] Security reviewed (no data URIs, check for nonce leak)
• [ ] Tests reviewed (coverage, legitimacy)