or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

babel-compiler.md babel-doctor.md babel-node.md external-helpers.md index.md

tile.json

External Helpers

babel-external-helpers generates external Babel helper functions to reduce code duplication in compiled output. This is useful for optimizing bundle sizes when Babel transformations generate repeated helper code.

Capabilities

Helper Generation

Generate external helper functions that can be included once and referenced by compiled code.

/**
 * Generate external Babel helper functions
 * Command: babel-external-helpers [options]
 * 
 * Outputs helper functions to stdout for inclusion in builds
 * Reduces code duplication across multiple compiled files
 */

Usage Examples:

# Generate all helpers
babel-external-helpers

# Save to file
babel-external-helpers > helpers.js

# Generate specific output format
babel-external-helpers --output-type umd > helpers-umd.js

Helper Whitelisting

Control which helper functions are included in the output.

/**
 * Whitelist specific helpers for inclusion
 * Option: --whitelist, -l [list]
 * 
 * Only includes specified helpers in output
 * Comma-separated list of helper names
 * Useful for minimizing helper bundle size
 */

Usage Examples:

# Include only specific helpers
babel-external-helpers --whitelist classCallCheck,inherits

# Single helper
babel-external-helpers -l asyncToGenerator

# Multiple helpers
babel-external-helpers --whitelist "extends,objectSpread,slicedToArray"

Output Format Control

Generate helpers in different module formats for various build systems.

/**
 * Control output format for different environments
 * Option: --output-type, -t [type]
 * 
 * Available formats:
 * - global: Global variable assignment (default)
 * - umd: Universal Module Definition
 * - var: Variable declarations
 */

Usage Examples:

# Global format (default)
babel-external-helpers --output-type global

# UMD format for universal compatibility
babel-external-helpers --output-type umd

# Variable declarations
babel-external-helpers --output-type var

Helper Functions

Babel external helpers include various utility functions used by transformations:

/**
 * Common Babel helpers include:
 * - classCallCheck: ES6 class constructor validation
 * - inherits: Class inheritance setup
 * - possibleConstructorReturn: Constructor return value handling
 * - createClass: ES6 class method definition
 * - extends: Object.assign polyfill
 * - objectSpread: Object spread operator
 * - slicedToArray: Array destructuring
 * - toConsumableArray: Array spread operator
 * - asyncToGenerator: async/await transformation
 * - regeneratorRuntime: Generator function support
 */

Output Examples

Global Format

// babel-external-helpers --output-type global
var babelHelpers = {};

babelHelpers.classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

babelHelpers.createClass = function () {
  // Helper implementation...
};

UMD Format

// babel-external-helpers --output-type umd
(function (root, factory) {
  if (typeof exports === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define(factory);
  } else {
    root.babelHelpers = factory();
  }
})(this, function () {
  var babelHelpers = {};
  // Helper implementations...
  return babelHelpers;
});

Variable Format

// babel-external-helpers --output-type var
var babelHelpers_classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var babelHelpers_createClass = function () {
  // Helper implementation...
};

Integration with Build Systems

External helpers integrate with various build and bundling systems:

/**
 * Build system integration patterns:
 * 
 * Webpack: Include helpers as separate entry point
 * Rollup: Import helpers as external dependency
 * Browserify: Concatenate helpers with bundle
 * Custom builds: Include helpers before compiled code
 */

Usage Examples:

# Webpack integration
babel-external-helpers --output-type umd > src/babel-helpers.js

# Rollup integration
babel-external-helpers --output-type umd > helpers/babel.js

# Simple concatenation
babel-external-helpers > dist/helpers.js
cat dist/helpers.js dist/app.js > dist/bundle.js

Helper Optimization

Use whitelisting to optimize helper bundle size:

/**
 * Optimization strategies:
 * 1. Analyze compiled output to identify used helpers
 * 2. Whitelist only necessary helpers
 * 3. Use appropriate output format for target environment
 * 4. Consider gzip compression benefits
 */

Usage Examples:

# Analyze what helpers are needed
grep -r "babelHelpers\." dist/ | cut -d. -f2 | sort -u

# Generate only needed helpers
babel-external-helpers --whitelist "$(needed_helpers)" > helpers.js

Error Handling

External helpers command handles various error scenarios:

/**
 * Error conditions:
 * - Invalid helper names in whitelist (ignored)
 * - Invalid output type (defaults to global)
 * - babel-core dependency issues
 * - Output stream errors
 */

The command outputs to stdout and uses babel-core's buildExternalHelpers function internally.

Use Cases

External helpers are most beneficial in specific scenarios:

/**
 * Optimal use cases:
 * - Multiple entry points with shared transformations
 * - Large applications with many ES6+ features
 * - Bundle size optimization requirements
 * - Shared helper code across multiple builds
 * 
 * Less beneficial for:
 * - Single-file applications
 * - Simple transformations
 * - Server-side only code
 * - Applications using tree-shaking bundlers
 */

Version

Tile

Files