CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel-polyfill

Comprehensive ES2015+ polyfills necessary for running modern JavaScript code in older environments.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

babel-polyfill

babel-polyfill is a comprehensive polyfill orchestration package that provides all ES2015+ features in older JavaScript environments. Rather than implementing polyfills directly, it imports and coordinates multiple polyfill libraries (core-js, regenerator-runtime) and adds a few compatibility enhancements.

Package Information

  • Package Name: babel-polyfill
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install babel-polyfill

Core Imports

ES6 import (recommended):

import "babel-polyfill";

CommonJS require:

require("babel-polyfill");

Browser script tag:

<script src="node_modules/babel-polyfill/browser.js"></script>

Basic Usage

// Import at the very beginning of your application entry point
import "babel-polyfill";

// Now all ES2015+ features are available globally
const promise = new Promise((resolve) => resolve("Hello"));
const map = new Map();
const set = new Set();

// Array methods work
[1, 2, 3].includes(2); // true
[1, 2, 3].find(x => x > 1); // 2

// String methods work  
"hello".startsWith("he"); // true
"hello".padStart(10, "*"); // "*****hello"

// Object methods work
Object.assign({}, {a: 1}, {b: 2}); // {a: 1, b: 2}

// Async/await and generators work (requires babel-transform)
async function example() {
  const result = await Promise.resolve("data");
  return result;
}

Architecture

babel-polyfill is a lightweight orchestration layer that coordinates comprehensive polyfills:

  • Singleton Pattern: Prevents multiple polyfill instances using global._babelPolyfill flag
  • Import Orchestration: Imports core-js/shim for ES2015+ standard library and regenerator-runtime/runtime for async/generator support
  • Compatibility Layer: Adds backwards-compatible aliases and static method conveniences
  • Dependency Management: Manages polyfill load order and prevents conflicts

Capabilities

Global Polyfill Installation

The primary capability - installs all ES2015+ polyfills globally when the module is imported.

// Import triggers global polyfill installation
import "babel-polyfill";
require("babel-polyfill");

Behavior:

  • Throws error if already imported: "only one instance of babel-polyfill is allowed"
  • Sets global._babelPolyfill = true to prevent duplicate imports
  • Imports core-js/shim for ES2015+ standard library features
  • Imports regenerator-runtime/runtime for async/generator support
  • Adds backwards compatibility shims for deprecated methods

Direct Implementation - Internal Helper API

Actual functions implemented directly by babel-polyfill:

/**
 * Core utility function for defining properties on objects
 * Used internally to create backwards-compatible aliases
 * @param {Object} O - Target object
 * @param {string} key - Property key to define
 * @param {any} value - Property value to assign
 */
function define(O, key, value): void;

Array Static Method Creation

Dynamically creates static versions of Array prototype methods:

// Static methods created from prototype methods using Function.call.bind:
Array.pop; Array.reverse; Array.shift; Array.keys; Array.values; Array.entries;
Array.indexOf; Array.every; Array.some; Array.forEach; Array.map; Array.filter;
Array.find; Array.findIndex; Array.includes; Array.join; Array.slice; Array.concat;
Array.push; Array.splice; Array.unshift; Array.sort; Array.lastIndexOf;
Array.reduce; Array.reduceRight; Array.copyWithin; Array.fill;

Implementation mechanism:

// Each static method is created as:
Array[methodName] = Function.call.bind([][methodName]);

String Padding Aliases (Direct Implementation)

Backwards-compatible aliases created directly by babel-polyfill:

// Legacy aliases pointing to standard methods
String.prototype.padLeft; // → String.prototype.padStart
String.prototype.padRight; // → String.prototype.padEnd

Implementation:

define(String.prototype, "padLeft", "".padStart);
define(String.prototype, "padRight", "".padEnd);

Imported Features - Comprehensive ES2015+ Support

Features provided through imported dependencies (not directly implemented):

Via core-js/shim:

// Promise, Map, Set, WeakMap, WeakSet, Symbol, Proxy, Reflect
// Object.assign, Array.from, String.prototype.startsWith, etc.
// Number.isInteger, Math.sign, and 100+ other ES2015+ features

Via regenerator-runtime/runtime:

// Runtime support for generators and async functions
regeneratorRuntime.mark(generatorFunction);
regeneratorRuntime.wrap(innerFn, outerFn, self, tryLocsList);
regeneratorRuntime.async(innerFn, outerFn, self, tryLocsList);
regeneratorRuntime.awrap(arg);

Via core-js/fn/regexp/escape (Deprecated):

// RegExp.escape (scheduled for removal in future versions)
RegExp.escape(string);

Error Handling

// Throws if imported multiple times
Error: "only one instance of babel-polyfill is allowed"

Usage Patterns

Application Entry Point

// At the very beginning of your main application file
import "babel-polyfill";

// Rest of your application code
import React from "react";
import App from "./App";

// All ES2015+ features now available

Webpack Configuration

// webpack.config.js
module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  // ... rest of config
};

Testing Setup

// test/setup.js
import "babel-polyfill";

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
};

Browser Script Tag

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/babel-polyfill/browser.js"></script>
</head>
<body>
  <script>
    // All ES2015+ features available
    console.log([1,2,3].includes(2));
  </script>
</body>
</html>

Dependencies

  • core-js: ^2.5.0 - Provides all ES2015+ standard library polyfills (Promise, Map, Set, Object.assign, etc.)
  • regenerator-runtime: ^0.10.5 - Runtime support for async functions and generators
  • babel-runtime: ^6.26.0 - Babel transformation runtime helpers and utilities
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-polyfill@6.26.x
Publish Source
CLI
Badge
tessl/npm-babel-polyfill badge