or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

babel-customizers.md core-overrides.md index.md utilities.md webpack-customizers.md

tile.json

Babel Customizers

Configuration customizers for Babel transpilation including plugins, presets, and loader options.

Capabilities

Add Babel Plugin

Add a plugin to the babel configuration for files in the src/ directory.

/**
 * Add plugin to babel configuration for src/ files
 * @param {string|Array} plugin - Babel plugin name or [name, options] array
 * @returns {Function} Configuration customizer function
 */
function addBabelPlugin(plugin);

Usage Examples:

const { override, addBabelPlugin } = require("customize-cra");

// Add plugin by name
module.exports = override(
  addBabelPlugin("babel-plugin-transform-do-expressions")
);

// Add plugin with options
module.exports = override(
  addBabelPlugin(["@babel/plugin-proposal-decorators", { legacy: true }])
);

Add External Babel Plugin

Add a plugin to the babel configuration for files outside the src/ directory (like node_modules).

/**
 * Add plugin to external babel loader (outside src/)
 * Creates plugins array if it doesn't exist
 * @param {string|Array} plugin - Babel plugin name or [name, options] array  
 * @returns {Function} Configuration customizer function
 */
function addExternalBabelPlugin(plugin);

Add Babel Preset

Add a preset to the babel configuration.

/**
 * Add preset to babel configuration
 * @param {string|Array} preset - Babel preset name or [name, options] array
 * @returns {Function} Configuration customizer function
 */
function addBabelPreset(preset);

Usage Examples:

// Add preset by name
module.exports = override(
  addBabelPreset("@babel/preset-flow")
);

// Add preset with options
module.exports = override(
  addBabelPreset([
    "@babel/env",
    {
      targets: { browsers: ["> 1%", "last 2 versions"] },
      modules: "commonjs"
    }
  ])
);

Add Decorators Legacy

Add legacy decorators support using @babel/plugin-proposal-decorators.

/**
 * Add legacy decorators support
 * Equivalent to addBabelPlugin(["@babel/plugin-proposal-decorators", { legacy: true }])
 * @returns {Function} Configuration customizer function
 */
function addDecoratorsLegacy();

Use Babel RC

Enable usage of .babelrc or .babelrc.js files.

/**
 * Enable .babelrc file usage
 * Sets babelrc option to true in babel loader
 * @returns {Function} Configuration customizer function
 */
function useBabelRc();

Babel Include

Set the include paths for babel-loader.

/**
 * Set babel loader include paths
 * Overwrites the existing include option
 * @param {string|Array|RegExp} include - Include paths or patterns
 * @returns {Function} Configuration customizer function
 */
function babelInclude(include);

Usage Examples:

const path = require("path");

module.exports = override(
  babelInclude([
    path.resolve("src"), // include your own source
    path.resolve("node_modules/some-package"), // include specific node_modules
    path.resolve("node_modules/another-package")
  ])
);

Babel Exclude

Set the exclude paths for babel-loader.

/**
 * Set babel loader exclude paths
 * Overwrites the existing exclude option
 * @param {string|Array|RegExp} exclude - Exclude paths or patterns
 * @returns {Function} Configuration customizer function
 */
function babelExclude(exclude);

Multiple Plugins Helper

Helper function to add multiple babel plugins at once.

/**
 * Helper to add multiple babel plugins
 * @param {...(string|Array)} plugins - Variable number of plugin arguments
 * @returns {Array<Function>} Array of customizer functions (use with spread operator)
 */
function addBabelPlugins(...plugins);

Usage Examples:

// Use with spread operator
module.exports = override(
  ...addBabelPlugins(
    "polished",
    "emotion", 
    "babel-plugin-transform-do-expressions"
  )
);

Multiple External Plugins Helper

Helper function to add multiple external babel plugins at once.

/**
 * Helper to add multiple external babel plugins
 * @param {...(string|Array)} plugins - Variable number of plugin arguments
 * @returns {Array<Function>} Array of customizer functions (use with spread operator)
 */
function addExternalBabelPlugins(...plugins);

Multiple Presets Helper

Helper function to add multiple babel presets at once.

/**
 * Helper to add multiple babel presets
 * @param {...(string|Array)} presets - Variable number of preset arguments
 * @returns {Array<Function>} Array of customizer functions (use with spread operator)
 */
function addBabelPresets(...presets);

Fix Babel Imports

Add babel-plugin-import for optimizing library imports (tree shaking).

/**
 * Add babel-plugin-import for library optimization
 * Adds import plugin with specified library name and options
 * @param {string} libraryName - Name of the library to optimize
 * @param {Object} options - Options for babel-plugin-import
 * @returns {Function} Configuration customizer function
 */
function fixBabelImports(libraryName, options);

Usage Examples:

module.exports = override(
  // Optimize lodash imports
  fixBabelImports("lodash", {
    libraryDirectory: "",
    camel2DashComponentName: false
  }),
  
  // Optimize antd imports
  fixBabelImports("antd", {
    libraryDirectory: "lib",
    style: "css"
  })
);

Remove Internal Babel Plugin

Remove a babel plugin by constructor name from the webpack configuration.

/**
 * Remove babel plugin by constructor name
 * Filters webpack plugins array to remove matching plugin
 * @param {string} pluginName - Name of plugin constructor to remove
 * @returns {Function} Configuration customizer function
 */
function removeInternalBabelPlugin(pluginName);

Implementation Notes

addBabelPlugin and related functions modify the babel-loader configuration within webpack
Create-react-app uses two babel configurations: one for src/ files and one for external files
The external babel loader (for node_modules) may not have a plugins array initially, so addExternalBabelPlugin creates it if needed
Helper functions like addBabelPlugins return arrays of customizers, so they must be used with the spread operator
All babel customizations only affect the build process, not the test environment unless useBabelRc() is used

Version

Tile

Files