Better polyfilling for IE11 in NPM

Feature request

Currently, the polyfilling story isn't great on NPM via create-react-app.

• It requires use to copy bunches of line from index-es5.js into the hosting project to load the polyfills

One approach is to follow what create-react-app does. To make CRA works in IE11, you will need to import 'react-app-polyfill/ie11'; and it will bring all polyfills required to make the CRA app works in IE11.

We could do something similar with:

import 'botframework-webchat/ie11';
import { ReactWebChat } from 'botframework-webchat';

Or

import 'botframework-webchat-polyfill/ie11';
import { ReactWebChat } from 'botframework-webchat';

Also, it seems Set does not need to be polyfilled.

Update from 2021-12-14

We should use @babel/plugin-transform-runtime and configure @babel/preset-env with useBuiltIns: "usage" to inline polyfills (a.k.a. ponyfills).

• Add breaking changes: fetch is no longer polyfilled when using <script> tag to load Web Chat

For NPM install, we should do some investigations, goals:

• Import botframework-webchat will work on IE11 or older browsers without significant work on bundler configuration
  • Chrome 85 introduced String.prototype.replaceAll
• Ponyfills should not be leaked

Start by reviewing packages/bundle/src/index-es5.ts and the current NPM import behavior, then compare the CRA and Babel approaches described in the issue. Done means the documented botframework-webchat import works for IE11 or older browsers without significant bundler configuration, while ponyfills do not leak; the issue also calls out a fetch change for script-tag usage.