Babel Preset Flow

Babel preset that removes Flow type annotations from JavaScript code during compilation. This preset provides a single plugin configuration that transforms Flow-typed JavaScript into standard JavaScript by stripping type annotations, making it ideal for development workflows where type safety aids development but clean JavaScript is needed for production.

Package Information

• Package Name: babel-preset-flow
• Package Type: npm
• Language: JavaScript (ES6 modules)
• Version: 6.23.0
• Author: James Kyle me@thejameskyle.com
• License: MIT
• Installation: npm install --save-dev babel-preset-flow

Core Imports

The preset is configured in Babel configuration files rather than imported directly:

.babelrc

{
  "presets": ["flow"]
}

babel.config.js

module.exports = {
  presets: ["babel-preset-flow"]
};

package.json

{
  "babel": {
    "presets": ["flow"]
  }
}

Basic Usage

Transform Flow-typed JavaScript to standard JavaScript:

Input (Flow code)

// @flow
function add(x: number, y: number): number {
  return x + y;
}

type User = {
  name: string,
  age: number,
  active: boolean
};

const user: User = {
  name: "Alice",
  age: 30,
  active: true
};

Output (transformed)

function add(x, y) {
  return x + y;
}

const user = {
  name: "Alice",
  age: 30,
  active: true
};

Architecture

babel-preset-flow is a simple wrapper preset that encapsulates a single Babel plugin within the Babel ecosystem:

• Preset Wrapper: Acts as a convenient packaging mechanism for the babel-plugin-transform-flow-strip-types plugin
• Plugin Integration: Seamlessly integrates with Babel's preset system, allowing easy configuration alongside other presets
• Single Responsibility: Focused solely on Flow type annotation removal - no additional transformations
• Babel Ecosystem: Follows standard Babel preset conventions, making it compatible with all Babel-based build tools

The preset exports a configuration object that tells Babel which plugins to apply during compilation. This design pattern allows developers to enable Flow support with a single preset rather than manually configuring individual plugins.

Capabilities

Preset Configuration

The main export provides a Babel preset configuration that strips Flow type annotations.

import transformFlowStripTypes from "babel-plugin-transform-flow-strip-types";

/**
 * Default export containing Babel preset configuration
 * @returns Preset configuration object with Flow plugin
 */
export default {
  plugins: [transformFlowStripTypes]
};

Usage Methods

The preset can be used in three primary ways:

Via .babelrc (Recommended)

{
  "presets": ["flow"]
}

Via CLI

babel --presets flow src --out-dir lib

Via Node API

require("babel-core").transform("code", {
  presets: ["flow"]
});

Dependencies

/**
 * Internal dependency providing Flow type stripping functionality
 */
import transformFlowStripTypes from "babel-plugin-transform-flow-strip-types";

This preset wraps the babel-plugin-transform-flow-strip-types plugin, which handles:

• Removing Flow type annotations from function parameters
• Stripping return type annotations
• Removing type aliases and interface declarations
• Eliminating Flow pragma comments
• Preserving JavaScript functionality while removing type syntax

Integration

The preset integrates seamlessly with existing Babel configurations and can be combined with other presets:

{
  "presets": [
    "babel-preset-flow",
    "@babel/preset-env"
  ]
}

Works with all Babel-compatible build tools including webpack, Rollup, Parcel, and Create React App.