build(replay): Generate Replay CDN bundles (#6391)

Add a rollup config to generate an addon CDN bundle for the Replay integration. Usage of this bundle is identical to our other integration CDN bundles in the sense that the bundle has to be added in addition to the regular browser (or browser+tracing) bundle. 

As of this PR, three bundles will be generated into `build/bundles`:

* `replay.js` (the unminified bundle with debug output)
* `replay.min.js`(the minified bundle without debug output)
* `replay.debug.min.js` (the minified bundle with debug output)

For now, we'll only generate ES6 bundles but we can add ES5 versions if requested later on.

Author: Lms24

.size-limit.js

@@ -63,10 +63,9 @@ module.exports = [
     gzip: true,
     limit: '100 KB',
   },
-  // This entry is only here temporarily and will be replaced once we have proper CDN bundles
   {
-    name: '@sentry/replay index.js',
-    path: 'packages/replay/build/npm/esm/index.js',
+    name: '@sentry/replay ES6 CDN Bundle (gzipped + minified)',
+    path: 'packages/replay/build/bundles/replay.min.js',
     gzip: true,
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
@@ -79,12 +78,4 @@ module.exports = [
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
   },
-  {
-    name: '@sentry/replay - Webpack (minified)',
-    path: 'packages/replay/build/npm/esm/index.js',
-    import: '{ Replay }',
-    gzip: false,
-    limit: '300 KB',
-    ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
-  },
 ];

packages/replay/package.json

@@ -7,14 +7,18 @@
   "types": "build/npm/types/index.d.ts",
   "sideEffects": false,
   "scripts": {
+    "build": "run-s build:worker && run-p build:core build:types build:bundle",
     "build:rollup": "run-s build:worker build:core",
-    "build": "run-s build:worker && run-p build:core build:types",
-    "build:dev": "run-s build #TODO adjust after adding CDN bundles",
+    "build:bundle": "rollup -c rollup.bundle.config.js",
+    "build:dev": "run-p build:worker build:rollup build:types",
     "build:worker": "rollup -c rollup.config.worker.js",
     "build:core": "rollup -c rollup.npm.config.js",
     "build:types": "tsc -p tsconfig.types.json",
-    "build:watch": "run-p \"build:worker --watch\" \"build:core --watch\" build:types:watch",
-    "build:dev:watch": "yarn build:watch #TODO adjust after adding CDN bundles",
+    "build:watch": "run-p build:worker:watch build:core:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:core:watch build:types:watch",
+    "build:core:watch": "yarn build:core --watch",
+    "build:worker:watch": "yarn build:worker --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",

packages/replay/rollup.bundle.config.js

@@ -0,0 +1,30 @@
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';
+
+import pkg from './package.json';
+
+const baseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/index.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry/replay',
+  outputFileBase: () => 'bundles/replay',
+  packageSpecificConfig: {
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
+        },
+      }),
+      // lodash.debounce is a CJS module, so we need to convert it to ESM first
+      commonjs(),
+    ],
+  },
+});
+
+const builds = makeBundleConfigVariants(baseBundleConfig);
+
+export default builds;

packages/replay/src/constants.ts

@@ -1,8 +1,9 @@
 import { GLOBAL_OBJ } from '@sentry/utils';
 
-// exporting WINDOW from within the @sentry/replay instead of importing it from @sentry/browser
-// this avoids the Browser package being bundled into the CDN bundle as well as a
-// circular dependency between the Browser and Replay packages in the future
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and replay packages should `@sentry/browser` import
+// from `@sentry/replay` in the future
 export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 export const REPLAY_SESSION_KEY = 'sentryReplaySession';

packages/replay/src/index.ts

@@ -23,7 +23,7 @@ import { deleteSession } from './session/deleteSession';
 import { getSession } from './session/getSession';
 import { saveSession } from './session/saveSession';
 import { Session } from './session/Session';
-import {
+import type {
   AllPerformanceEntry,
   InstrumentationTypeBreadcrumb,
   InstrumentationTypeSpan,