A craco plugin for automatic aliases generation for Webpack and Jest.

• Installation
• Options
• Examples
• Migrating from cra-alias

1. Install craco

2. Install craco-alias:

   npm i -D craco-alias

3. Edit craco.config.js:

   const CracoAlias = require("craco-alias");
   
   module.exports = {
     plugins: [
       {
         plugin: CracoAlias,
         options: {
           // craco-alias options
           // please see below
         }
       }
     ]
   };

4. Go to Examples section

• source: One of "options", "jsconfig", "tsconfig"
  Defaults to "options"

• aliases: An object with aliases names and paths
  Defaults to {}

• tsConfigPath: A path to tsconfig file
  Only required when source is set to "tsconfig"

/* craco.config.js */

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "options",
        aliases: {
          "@file": "src/file.js",
          "@dir": "src/some/dir"
        }
      }
    }
  ]
};

/* craco.config.js */

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig"
      }
    }
  ]
};

/* jsconfig.json */

{
  compilerOptions: {
    baseUrl: "src",
    paths: {
      "@file": ["file.js"],
      "@dir/*": ["dir/*", "dir"]
    }
  }
}

/* craco.config.js */

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        // as you know, CRA doesn't allow to modify tsconfig's compilerOptions
        // so you should create a separate JSON file and extend tsconfig.json from it
        // and then just specify its path here:
        tsConfigPath: "tsconfig.paths.json"
      }
    }
  ]
};

/* tsconfig.paths.json */

{
  compilerOptions: {
    baseUrl: "src",
    paths: {
      "@file": ["file.js"],
      "@dir/*": ["dir/*", "dir"]
    }
  }
}

1. Install craco and craco-alias:

   npm i -D @craco/craco craco-alias

2. Create a craco.config.js file in the root directory:

   See tsconfig example in the Examples section

   /* craco.config.js */
   
   const CracoAlias = require("craco-alias");
   
   module.exports = {
     plugins: [
       {
         plugin: CracoAlias,
         options: {
           source: "jsconfig"
         }
       }
     ]
   };

3. Update the existing calls to cra-alias in the scripts section of your package.json file to use the craco CLI:

   /* package.json */
   
   "scripts": {
   -   "start": "cra-alias start",
   +   "start": "craco start",
   -   "build": "cra-alias build",
   +   "build": "craco build"
   -   "test": "cra-alias test",
   +   "test": "craco test"
   }

4. Done! You can also remove cra-alias:

   npm r -D cra-alias