@imtf/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
• 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.
• enableSvgr: enable the svgr webpack plugin. SVGs are loaded as separate files by default. Enabling this options allow you to import SVGs as React components. See CRA documentation for more detailed explanation.
• 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
        enableSvgr: true, // Optional.
        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