Babel

The library provides tuneable standard configs (presets) for Babel builds:

For client-side-targeted builds with Webpack and babel-loader.
For server-side-targeted builds with pure Babel, and SSR (server-side rendering) support.

Client-side

To include the preset into Babel config:

{
  presets: ['@dr.pogodin/react-utils/config/babel/webpack'],
}

Alternatively, to pass-in custom options:

{
  presets: [
    ['@dr.pogodin/react-utils/config/babel/webpack', {
      optionName: 'optionValue',
    }]
  ]
}

This preset includes:

@babel/preset-env and @babel/preset-react presets required to compile modern JS(X) code.
@dr.pogodin/babel-preset-svgr preset, which allows to import SVG files as React components.
babel-plugin-module-resolver, which automatically attempts to resolve relative module imports relative to /src/shared and /src folders in the host codebase.
@babel/plugin-transform-runtime, which enables the re-use of Babel's injected helper code to save on code size.
@dr.pogodin/babel-plugin-react-css-modules, which is a part of CSS modules setup that transforms styleName props of React components into globally unique className props. Generated class names are verbose in development and test environments, to faciliate debugging, and they are short 6-symbol-long hashes in production Babel environment, to ensure compact CSS and JS output code.
In development environment the preset includes react-refresh/babel, required by HMR (Hot Module Resolving).

These are client-side preset options:

noRR - boolean - Set true to opt out of react-refresh/babel inclusion in development (and any other) environment.
noStyling - boolean - Set true to opt out of any setup related to styling ((S)CSS processing, CSS Modules).
targets - object | string | string[] - Compilation targets to pass into @babel/preset-env. Defaults to defaults.

To include the preset into Babel config:

{
  presets: ['@dr.pogodin/react-utils/config/babel/node-ssr'],
}

Alternatively, to pass-in custom options:

{
  presets: [
    ['@dr.pogodin/react-utils/config/babel/node-ssr', {
      optionName: 'optionValue',
    }]
  ]
}

This preset is build on top of the client-side one. It performs the same configurations, and on top of that it:

Enables replaceImport feature of @dr.pogodin/babel-plugin-react-css-modules plugin to replace stylesheet imports with maps of generated classnames, and remove anonymous stylesheet imports.
Includes @dr.pogodin/babel-plugin-tranform-assets plugin to convert GIF, JPEG, JPG, and PNG imports into emitted asset paths, like /images/[FILE_HASH].[FILE_EXTENSION].

The baseAssetsOutputPath preset option allows to add custom prefix to these paths. You want it to match the publicPath value provided to the Webpack config (e.g see publicPath option of the base Webpack config for apps).
In development environment it remove react-refresh/babel plugin, if it was included by the client-side preset.

Info

Prior to v1.15.0 @dr.pogodin/babel-plugin-css-modules-transform was included to achieve the same logic covered now by replaceImport feature of @dr.pogodin/babel-plugin-react-css-modules.

It accepts all client-side preset option, and on top of that:

baseAssetsOutputPath - string - Path prefix for emitted image assets. Defaults to empty string.