polyfills and config necessary for spfx ie11 support (#514)

Author: vogtn

samples/sp-webpart/gulpfile.js

@@ -4,4 +4,28 @@ const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
+build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+      generatedConfiguration.module.rules.push(
+        {
+          test: /\.m?js$/, use:
+          {
+            loader: "babel-loader",
+            options:
+            {
+              presets: [["@babel/preset-env",
+                {
+                  targets: {
+                    "ie": "11"
+                  }
+                }]]
+            }
+          }
+        }
+      );
+  
+      return generatedConfiguration;
+    }
+  });
+
 build.initialize(gulp);

samples/sp-webpart/package.json

@@ -30,6 +30,8 @@
     "@types/react": "16.8.8"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
     "@microsoft/rush-stack-compiler-3.7": "0.2.9",
     "@microsoft/sp-build-web": "1.10.0",
     "@microsoft/sp-module-interfaces": "1.10.0",
@@ -38,7 +40,10 @@
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
+    "babel-loader": "^8.1.0",
     "gulp": "~3.9.1",
-    "typescript": "^3.4.3"
+    "regenerator-runtime": "^0.13.5",
+    "typescript": "^3.4.3",
+    "webpack": "^4.43.0"
   }
 }

samples/sp-webpart/src/webparts/mgtDemo/MgtDemoWebPart.ts

@@ -2,18 +2,22 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import {
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-property-pane';
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
+
+// import web component polyfills for browsers that need them
+import 'regenerator-runtime/runtime';
+import 'core-js/es/number';
+import 'core-js/es/math';
+import 'core-js/es/string';
+import 'core-js/es/date';
+import 'core-js/es/array';
+import 'core-js/es/regexp';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 
 import * as strings from 'MgtDemoWebPartStrings';
 import MgtDemo from './components/MgtDemo';
 import { IMgtDemoProps } from './components/IMgtDemoProps';
 
-// import web component polyfills for browsers that need them
-import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
-
 // import the providers at the top of the page
 import { Providers, SharePointProvider } from '@microsoft/mgt';