craco-esbuild

🚀 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-esbuild @craco/craco

OR

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

Usage

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

// craco.config.js
const CracoEsbuildPlugin = require('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('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',
          },
        },
      },
    },
  ],
};

License

MIT © Léo Pradel