tessl/npm-customize-cra

A set of utilities to customize create-react-app configurations leveraging react-app-rewired core functionalities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Customize CRA

Name: tessl/npm-customize-cra
Author: tessl

Customize CRA provides a comprehensive set of utilities to customize create-react-app configurations by leveraging react-app-rewired functionality. It offers a wide range of customizers for webpack, babel, and dev-server configurations including adding babel plugins/presets, configuring loaders (Less, PostCSS, TypeScript), disabling ESLint, adding webpack aliases, bundle visualization, and workbox adjustments.

Package Information

Package Name: customize-cra
Package Type: npm
Language: JavaScript
Installation: npm install customize-cra react-app-rewired --dev

Core Imports

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

For ES modules:

import { override, addDecoratorsLegacy, disableEsLint } from "customize-cra";

Basic Usage

Customize CRA works by creating a config-overrides.js file that uses the override function to compose multiple customizers:

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // Enable legacy decorators babel plugin
  addDecoratorsLegacy(),
  
  // Disable eslint in webpack
  disableEsLint(),
  
  // Add webpack bundle visualizer conditionally
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
  
  // Add webpack alias
  addWebpackAlias({
    ["@components"]: path.resolve(__dirname, "src/components")
  })
);

For webpack-dev-server customization:

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

module.exports = {
  webpack: override(
    // webpack customizers here
  ),
  devServer: overrideDevServer(
    // dev server customizers here
    watchAll()
  )
};

Architecture

Customize CRA is built around several key components:

Override Functions: Core composition functions (override, overrideDevServer) that use lodash.flow to apply multiple customizers
Functional Composition: All customizers follow the pattern (options) => (config) => modifiedConfig for easy composition
Configuration Targeting: Separate customizers for webpack, babel, and dev-server configurations
Utility Functions: Helper functions like getBabelLoader and tap for navigating and debugging configurations

Capabilities

Core Override Functions

Main functions for composing configuration customizers with functional composition approach.

/**
 * Composes multiple customizer functions using lodash.flow
 * @param {...Function} plugins - Customizer functions to apply
 * @returns {Function} Composed configuration function
 */
function override(...plugins);

/**
 * Compose customizers for webpack-dev-server configuration
 * @param {...Function} plugins - Dev server customizer functions
 * @returns {Function} Dev server configuration function
 */
function overrideDevServer(...plugins);

Core Override Functions

Babel Customizers

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

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

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

/**
 * Add legacy decorators support
 * @returns {Function} Configuration customizer function
 */
function addDecoratorsLegacy();

Babel Customizers

Webpack Customizers

Configuration customizers for webpack including loaders, plugins, aliases, and build optimization.

/**
 * Remove ESLint from webpack configuration
 * @returns {Function} Configuration customizer function
 */
function disableEsLint();

/**
 * Add webpack resolve aliases
 * @param {Object} alias - Object mapping alias names to paths
 * @returns {Function} Configuration customizer function  
 */
function addWebpackAlias(alias);

/**
 * Add plugin to webpack configuration
 * @param {Object} plugin - Webpack plugin instance
 * @returns {Function} Configuration customizer function
 */
function addWebpackPlugin(plugin);

/**
 * Add webpack-bundle-analyzer plugin
 * @param {Object} options - Bundle analyzer options
 * @param {boolean} behindFlag - Whether to only enable with --analyze flag
 * @returns {Function} Configuration customizer function
 */
function addBundleVisualizer(options = {}, behindFlag = false);

Webpack Customizers

Utilities

Helper functions for navigating webpack configurations and debugging.

/**
 * Extracts babel loader from webpack config
 * @param {Object} config - Webpack configuration object
 * @param {boolean} isOutsideOfApp - Whether to get loader for files outside src/
 * @returns {Object} Babel loader configuration object
 */
function getBabelLoader(config, isOutsideOfApp);

/**
 * Debug utility for inspecting configuration objects
 * @param {Object} options - Options object with message and dest properties
 * @returns {Function} Configuration pass-through function with logging
 */
function tap(options);

Utilities

Types

/**
 * Configuration customizer function type
 * @callback ConfigCustomizer
 * @param {Object} config - Webpack configuration object to modify
 * @returns {Object} Modified webpack configuration object
 */

/**
 * Dev server customizer function type  
 * @callback DevServerCustomizer
 * @param {Object} config - Dev server configuration object to modify
 * @returns {Object} Modified dev server configuration object
 */

/**
 * Tap options for debugging configurations
 * @typedef {Object} TapOptions
 * @property {string} [message] - Message to print before configuration
 * @property {string} [dest] - File path to write logs to
 */