ref(build): Introduce central build directory to packages with bundles (#4838)

Adds the central build directory to all our packages producing CDN bundles in addition to NPM tarballs:
- Browser
- Integrations
- Tracing
- WASM

Additionally, the script that would formerly be called `postbuild.ts` is now `prepack.ts` and it runs first when executing `yarn build:npm`, followed by the tarball packing procedure via npm. 
Exception: Tracing needs to have the modified package.json in the build dir for our Playwright integration tests, so `prepack.ts` is also executed after every build.

Author: Lms24

.github/workflows/build.yml

@@ -204,8 +204,8 @@ jobs:
           name: ${{ github.sha }}
           path: |
             ${{ github.workspace }}/packages/browser/build/bundles/**
-            ${{ github.workspace }}/packages/integrations/build/**
-            ${{ github.workspace }}/packages/tracing/build/**
+            ${{ github.workspace }}/packages/integrations/build/bundles/**
+            ${{ github.workspace }}/packages/tracing/build/bundles/**
             ${{ github.workspace }}/packages/**/*.tgz
             ${{ github.workspace }}/packages/serverless/dist-awslambda-layer/*.zip
 

.size-limit.js

@@ -25,14 +25,14 @@ module.exports = [
   },
   {
     name: '@sentry/browser - Webpack (gzipped + minified)',
-    path: 'packages/browser/build/esm/index.js',
+    path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init }',
     gzip: true,
     limit: '100 KB',
   },
   {
     name: '@sentry/browser - Webpack (minified)',
-    path: 'packages/browser/build/esm/index.js',
+    path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init }',
     gzip: false,
     limit: '100 KB',
@@ -53,13 +53,13 @@ module.exports = [
   },
   {
     name: '@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)',
-    path: 'packages/tracing/build/bundle.tracing.min.js',
+    path: 'packages/tracing/build/bundles/bundle.tracing.min.js',
     gzip: true,
     limit: '100 KB',
   },
   {
     name: '@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)',
-    path: 'packages/tracing/build/bundle.tracing.es6.min.js',
+    path: 'packages/tracing/build/bundles/bundle.tracing.es6.min.js',
     gzip: true,
     limit: '100 KB',
   },

packages/browser/.npmignore

@@ -1,11 +1,11 @@
 # Info: the paths in this file are specified so that they align with the file
 # structure in `./build` where this file is copied to. This is done by the
-# postbuild script `sentry-javascript/scripts/postbuild.ts`.
+# prepack script `sentry-javascript/scripts/prepack.ts`.
 
 *
 
-# TODO remove bundles in v7
-!/bundles/**/*
+# TODO remove bundles (which in the tarball are inside `build`) in v7
+!/build/**/*
 
 !/dist/**/*
 !/types/**/*

packages/browser/package.json

@@ -9,9 +9,9 @@
   "engines": {
     "node": ">=6"
   },
-  "main": "build/dist/index.js",
-  "module": "build/esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/npm/dist/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -44,7 +44,7 @@
     "webpack": "^4.30.0"
   },
   "scripts": {
-    "build": "run-p build:cjs build:esm build:bundle build:types && ts-node ../../scripts/postbuild.ts",
+    "build": "run-p build:cjs build:esm build:bundle build:types",
     "build:bundle": "rollup --config",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:dev": "run-p build:cjs build:esm build:types",
@@ -58,7 +58,7 @@
     "build:dev:watch": "run-p build:cjs:watch build:esm:watch build:types:watch",
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack ./build",
+    "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",
     "clean": "rimraf build coverage .rpt2_cache",
     "fix": "run-s fix:eslint fix:prettier",

packages/browser/test/integration/run.js

@@ -73,7 +73,7 @@ function build() {
 
   writeFile(
     'artifacts/dedupe.js',
-    readFile('../../../integrations/build/dedupe.js').replace('//# sourceMappingURL=dedupe.js.map', '')
+    readFile('../../../integrations/build/bundles/dedupe.js').replace('//# sourceMappingURL=dedupe.js.map', '')
   );
   concatFiles('artifacts/setup.js', ['artifacts/dedupe.js', 'common/utils.js', 'common/triggers.js', 'common/init.js']);
   rmdir('artifacts/dedupe.js');

packages/browser/test/package/test-code.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-const Sentry = require('../../build/dist/index.js');
-const Integrations = require('../../../integrations/dist/dedupe.js');
+const Sentry = require('../../build/npm/dist/index.js');
+const Integrations = require('../../../integrations/build/npm/dist/dedupe.js');
 
 // Init
 Sentry.init({

packages/browser/tsconfig.cjs.json

@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "commonjs",
-    "outDir": "build/dist",
+    "outDir": "build/npm/dist"
   }
 }

packages/browser/tsconfig.esm.json

@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "es6",
-    "outDir": "build/esm",
+    "outDir": "build/npm/esm"
   }
 }

packages/browser/tsconfig.types.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
-    "outDir": "build/types"
+    "outDir": "build/npm/types"
   }
 }

packages/integration-tests/utils/generatePlugin.ts

@@ -17,20 +17,20 @@ const useBundle = bundleKey && !useCompiledModule;
 
 const BUNDLE_PATHS: Record<string, Record<string, string>> = {
   browser: {
-    cjs: 'build/dist/index.js',
-    esm: 'build/esm/index.js',
+    cjs: 'build/npm/dist/index.js',
+    esm: 'build/npm/esm/index.js',
     bundle_es5: 'build/bundles/bundle.js',
     bundle_es5_min: 'build/bundles/bundle.min.js',
     bundle_es6: 'build/bundles/bundle.es6.js',
     bundle_es6_min: 'build/bundles/bundle.es6.min.js',
   },
   tracing: {
-    cjs: 'dist/index.js',
-    esm: 'esm/index.js',
-    bundle_es5: 'build/bundle.tracing.js',
-    bundle_es5_min: 'build/bundle.tracing.min.js',
-    bundle_es6: 'build/bundle.tracing.es6.js',
-    bundle_es6_min: 'build/bundle.tracing.es6.min.js',
+    cjs: 'build/npm/dist/index.js',
+    esm: 'build/npm/esm/index.js',
+    bundle_es5: 'build/bundles/bundle.tracing.js',
+    bundle_es5_min: 'build/bundles/bundle.tracing.min.js',
+    bundle_es6: 'build/bundles/bundle.tracing.es6.js',
+    bundle_es6_min: 'build/bundles/bundle.tracing.es6.min.js',
   },
 };