@whatskit/craco-esbuild

Use esbuild in your create-react-app with craco for faster compilation, development and tests.

Features

Replace babel-loader with esbuild during development
Replace babel-loader with esbuild for faster build time
Replace terser with esbuild for faster build time
Replace OptimizeCssAssetsWebpackPlugin with esbuild for faster build time
Use esbuild when running jest

Installation

Run the following command to install craco-esbuild in your project:

yarn add --dev @craco/craco @whatskit/craco-esbuild

npm install --save-dev @craco/craco @whatskit/craco-esbuild

Usage

Add this configuration to your craco.config.js configuration file:

// craco.config.js
const CracoEsbuildPlugin = require('@whatskit/craco-esbuild');

module.exports = {
  plugins: [{ plugin: CracoEsbuildPlugin }],
};

To use craco instead of react-scripts to manage our application, edit the scripts section of your package.json.

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

Configuration

You can configure the options of the plugin by passing an options object.

esbuildLoaderOptions: customise the options passed down to the esbuild loader. Note: This will be used only by webpack
esbuildMinimizerOptions: customise the options passed down to ESBuildMinifyPlugin. Note: This will be used only by webpack
includePaths: include external directories in loader.
skipEsbuildJest: Avoid using esbuild-jest for jest configuration. Could be useful to avoid compatibility issues with transpiling tests.
esbuildJestOptions: customise the options passed down to the esbuild-jest transformer.

For example add this configuration to your craco.config.js configuration file:

// craco.config.js
const CracoEsbuildPlugin = require('@whatskit/craco-esbuild');

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        includePaths: ['/external/dir/with/components'], // Optional. If you want to include components which are not in src folder
        esbuildLoaderOptions: {
          // Optional. Defaults to auto-detect loader.
          loader: 'jsx', // Set the value to 'tsx' if you use typescript
          target: 'es2015',
        },
        esbuildMinimizerOptions: {
          // Optional. Defaults to:
          target: 'es2015',
          css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
        },
        skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
        esbuildJestOptions: {
          loaders: {
            '.ts': 'ts',
            '.tsx': 'tsx',
          },
        },
      },
    },
  ],
};