feat(build): expose true ESM bundle as primary artifact (#7937)

Refs #7907
Refs #7831

config/jest/jest.artifact.config.js

@@ -4,4 +4,5 @@ module.exports = {
   rootDir: path.join(__dirname, '..', '..'),
   testEnvironment: 'jsdom',
   testMatch: ['**/test/build-artifacts/**/*.js'],
+  transformIgnorePatterns: ['/node_modules/(?!(swagger-client|react-syntax-highlighter)/)'],
 };

package.json

@@ -180,6 +180,7 @@
     "webpack-bundle-size-analyzer": "^3.1.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
+    "webpack-node-externals": "=3.0.0",
     "webpack-stats-plugin": "=1.0.3"
   },
   "config": {

webpack/_config-builder.js

@@ -3,16 +3,13 @@
  */
 
 import path from "path"
-import fs from "fs"
 import deepExtend from "deep-extend"
 import webpack from "webpack"
 import TerserPlugin from "terser-webpack-plugin"
+import nodeExternals from "webpack-node-externals"
 
 import { getRepoInfo } from "./_helpers"
 import pkg from "../package.json"
-const nodeModules = fs.readdirSync("node_modules").filter(function(x) {
-  return x !== ".bin"
-})
 
 const projectBasePath = path.join(__dirname, "../")
 
@@ -30,7 +27,7 @@ const baseRules = [
     },
   },
   { test: /\.(txt|yaml)$/,
-    type: "asset/source", 
+    type: "asset/source",
   },
   {
     test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -93,24 +90,12 @@ export default function buildConfig(
 
       externals: includeDependencies
         ? {
-            // json-react-schema/deeper depends on buffertools, which fails.
-            buffertools: true,
-            esprima: true,
+            esprima: "esprima",
           }
-        : (context, request, cb) => {
-            // webpack injects some stuff into the resulting file,
-            // these libs need to be pulled in to keep that working.
-            var exceptionsForWebpack = ["ieee754", "base64-js"]
-            if (
-              nodeModules.indexOf(request) !== -1 ||
-              exceptionsForWebpack.indexOf(request) !== -1
-            ) {
-              cb(null, "commonjs " + request)
-              return
-            }
-            cb()
-          },
-
+        : [nodeExternals({
+          importType: (moduleName) => {
+            return `commonjs ${moduleName}`
+          }})],
       resolve: {
         modules: [path.join(projectBasePath, "./src"), "node_modules"],
         extensions: [".web.js", ".js", ".jsx", ".json", ".less"],

webpack/es-bundle-core.babel.js

@@ -2,17 +2,17 @@
  * @prettier
  */
 
- /** Dev Note: 
+ /** Dev Note:
  * StatsWriterPlugin is disabled by default; uncomment to enable
  * when enabled, rebuilding the bundle will cause error for assetSizeLimit,
  * which we want to keep out of CI/CD
  * post build, cli command: npx webpack-bundle-analyzer <path>
- */ 
+ */
 
 import configBuilder from "./_config-builder"
 import { DuplicatesPlugin } from "inspectpack/plugin"
 import { WebpackBundleSizeAnalyzerPlugin } from "webpack-bundle-size-analyzer"
-// import path from "path"
+import nodeExternals from "webpack-node-externals"
 // import { StatsWriterPlugin } from "webpack-stats-plugin"
 
 const result = configBuilder(
@@ -28,17 +28,32 @@ const result = configBuilder(
         "./src/index.js",
       ],
     },
+    experiments: {
+      outputModule: true,
+    },
     output: {
+      module: true,
+      libraryTarget: "module",
       library: {
-        type: "commonjs2",
-        export: "default",
+        type: "module",
+      },
+      environment: {
+        module: true,
       },
     },
+    externalsType: "module",
+    externals: [
+      {
+        esprima: "esprima",
+      },
+      nodeExternals({
+        importType: (moduleName) => {
+          return `module ${moduleName}`
+      }})
+    ],
     plugins: [
       new DuplicatesPlugin({
-        // emit compilation warning or error? (Default: `false`)
         emitErrors: false,
-        // display full duplicates information? (Default: `false`)
         verbose: false,
       }),
       new WebpackBundleSizeAnalyzerPlugin("log.es-bundle-core-sizes.swagger-ui.txt"),
@@ -50,4 +65,5 @@ const result = configBuilder(
   }
 )
 
+
 export default result

webpack/es-bundle.babel.js

@@ -2,12 +2,12 @@
  * @prettier
  */
 
-/** Dev Note: 
+/** Dev Note:
  * StatsWriterPlugin is disabled by default; uncomment to enable
  * when enabled, rebuilding the bundle will cause error for assetSizeLimit,
  * which we want to keep out of CI/CD
  * post build, cli command: npx webpack-bundle-analyzer <path>
- */ 
+ */
 
 import configBuilder from "./_config-builder"
 import { DuplicatesPlugin } from "inspectpack/plugin"