Adding the Array.prototype.flat polyfill from core-js for legacy browsers

Desired outcome

Make the ECMAScript 2020 Array.prototype.flat method available in browsers that do not natively support it (e.g., IE11, Safari 10) while keeping the JavaScript bundle as small as possible.

• A project that uses a module bundler such as Webpack, Rollup, or Vite.
• Node.js ≥ 12 and npm (or Yarn) installed.
• No existing polyfill for Array.flat that could conflict with the core-js version.

Procedure

1. Install the core-js package as a dependency:

   # Run in the project root
   npm install core-js --save
   # or: yarn add core-js
   

   This command writes the package to node_modules and updates package.json. No special permissions are required beyond write access to the project directory.

2. Import the flat polyfill early in your application entry point (e.g., src/index.js or main.ts). Importing the specific feature ensures only the needed code is bundled.

   // src/index.js
   import 'core-js/features/array/flat';
   
   // Your application code that uses Array.flat can follow
   const nested = [1, [2, 3], [[4]]];
   const flat = nested.flat(2);
   console.log(flat); // [1, 2, 3, 4]
   

   Place this import before any other code that calls Array.flat. If you have multiple entry points, repeat the import in each.

3. Rebuild your bundle to verify the polyfill is included.

   # Example with Webpack
   npm run build
   # or: yarn build
   

   After the build, inspect the generated bundle (e.g., with webpack-bundle-analyzer) to confirm that only the flat polyfill adds a few kilobytes, not the entire core-js library.

4. Test in a legacy browser.

   1. Open the built page in IE11 or Safari 10.
   2. Open the developer console and run:

   Array.prototype.flat; // should return a function
   [1, [2, 3]].flat(); // should return [1, 2, 3]
   

   If the function exists and returns the expected result, the polyfill is active.

Expected checks

• Bundle size increase: the flat polyfill adds roughly 1‑2 KB gzipped (verify with your bundle analysis tool).

• Prototype check in a modern browser (Chrome ≥ 110):

  console.log(Array.prototype.flat === [].flat.prototype.constructor); // true if native
  

  The value should be the native function, confirming the polyfill did not overwrite it.

• Unit test example (using Jest or similar):

  test('Array.flat works in legacy environments', () => {
    const input = [1, [2, [3, 4]], 5];
    expect(input.flat(2)).toEqual([1, 2, 3, 4, 5]);
  });
  

  Run the test in your CI against the built bundle targeting IE11 via a service like BrowserStack.

Recovery options (rollback)

If you discover that importing the polyfill causes a conflict or you no longer need legacy support, you can revert the change:

1. Remove the import line from your entry point.
2. Re‑run the build command.
3. Verify the bundle size decreases and that Array.flat is undefined in legacy browsers (which is acceptable if you drop support).

Because the import only adds code and does not modify project configuration, removing it is safe and does not require a database migration or similar rollback.