Craco-swc NPM | npm.io

🚀 craco-swc 🚀

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

Features

Replace babel-loader with swc during development
Replace babel-loader with swc for faster build time
Use swc when running jest

Installation

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

yarn add --dev craco-swc @craco/craco

# OR

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

Usage

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

// craco.config.js
const CracoSwcPlugin = require('craco-swc');

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

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

If your project contains a .swcrc file, it will be used by the swc loader configuration. Take a look at https://swc.rs/docs/configuring-swc#jsc to see the list of available options.

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

swcLoaderOptions: customise the options passed down to the swc loader. Note: This will be used only by webpack

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

// craco.config.js
const CracoSwcPlugin = require('craco-swc');

module.exports = {
  plugins: [
    {
      plugin: CracoSwcPlugin,
      options: {
        swcLoaderOptions: {
          jsc: {
            externalHelpers: true,
            target: 'es2015',
            parser: {
              syntax: 'ecmascript',
              jsx: true,
              dynamicImport: true,
              exportDefaultFrom: true,
            },
          },
        },
      },
    },
  ],
};