Output a "legacy-esm" artifact for Webpack 4 usage

Author: markerikson

packages/toolkit/package.json

@@ -22,7 +22,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "dist/redux-toolkit.esm.mjs",
+  "module": "dist/redux-toolkit.legacy-esm.js",
   "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -98,7 +98,7 @@
     "run-build": "tsx ./scripts/build.ts",
     "build-ci": "yarn rimraf dist && yarn tsc && yarn run-build --skipExtraction",
     "build-prepare": "npm run build-ci",
-    "build": "yarn rimraf dist && yarn tsc && yarn run-build --local --skipExtraction",
+    "build": "yarn rimraf dist && echo Compiling... && yarn tsc && yarn run-build --local --skipExtraction",
     "build-only": "yarn rimraf dist && yarn tsc && yarn run-build --skipExtraction",
     "format": "prettier --write \"(src|examples)/**/*.{ts,tsx}\" \"**/*.md\"",
     "format:check": "prettier --list-different \"(src|examples)/**/*.{ts,tsx}\" \"docs/*/**.md\"",

packages/toolkit/query/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "type": "module",
-  "module": "../dist/query/rtk-query.esm.mjs",
+  "module": "../dist/query/rtk-query.legacy-esm.js",
   "main": "../dist/query/cjs/index.js",
   "types": "./../dist/query/index.d.ts",
   "exports": {

packages/toolkit/query/react/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "type": "module",
-  "module": "../../dist/query/react/rtk-query-react.esm.mjs",
+  "module": "../../dist/query/react/rtk-query-react.legacy-esm.js",
   "main": "../../dist/query/react/cjs/index.js",
   "types": "./../../dist/query/react/index.d.ts",
   "exports": {

packages/toolkit/scripts/build.ts

@@ -63,7 +63,7 @@ const buildTargets: BuildOptions[] = [
   // which doesn't support `exports` field or optional chaining
   {
     format: 'esm',
-    name: 'esm',
+    name: 'legacy-esm',
     target: 'esnext',
     minify: false,
     env: '',
@@ -154,7 +154,8 @@ async function bundle(options: BuildOptions & EntryPointOptions) {
     folderSegments.push('cjs')
   }
 
-  const extension = format === 'esm' ? 'mjs' : 'cjs'
+  const extension =
+    name === 'legacy-esm' ? 'js' : format === 'esm' ? 'mjs' : 'cjs'
 
   const outputFolder = path.join(...folderSegments)
   const outputFilename = `${prefix}.${name}.${extension}`

packages/toolkit/scripts/types.ts

@@ -3,7 +3,7 @@ export interface BuildOptions {
   name:
     | 'development'
     | 'production.min'
-    | 'esm'
+    | 'legacy-esm'
     | 'modern'
     | 'modern.development'
     | 'modern.production.min'