risenforces/cra-alias

No longer maintained, please use https://github.com/risenforces/craco-alias

IMPORTANT NOTE

This package is NO LONGER MAINTAINED, please use craco-alias instead.

cra-alias

You don't need to eject your App to add aliases!

List of Contents

• Main Advantages
• Checklist
• Installation

Main Advantages

• cra-alias uses standard jsconfig.json and tsconfig.json files, so you don't have to create any extra configuration files (like config-overrides.js)

• cra-alias automatically generates moduleNameMapper for Jest, according to your js(ts)config.json

Checklist

• Support npm start
• Support npm run build
• Support npm test
• Support TypeScript CRA
• Support extra cli arguments
• Add TypeScript example to README

Installation

Install the package:

npm i -D cra-alias

The next steps depend on the language:

JavaScript

1. Go to project's root directory.

2. Create (or open if exists) jsconfig.json.

3. Edit it as follows:

   {
     "compilerOptions": {
       "baseUrl": "src", // only 'src' or 'node_modules'
       "paths": {
         "@file-alias": ["./your/file.js"],
         "@folder-alias/*": ["./very/long/path/*", "./very/long/path/"]
       }
     }
   }

4. Go to package.json

5. Replace react-scripts with cra-alias, like that:

     "scripts": {
   -   "start": "react-scripts start",
   +   "start": "cra-alias start",
   -   "build": "react-scripts build",
   +   "build": "cra-alias build",
   -   "test": "react-scripts test",
   +   "test": "cra-alias test",
       "eject": "react-scripts eject"
     }

TypeScript

1. Go to project's root directory.

2. Create tsconfig.paths.json.

3. Edit it as follows:

   {
     "compilerOptions": {
       "baseUrl": "src", // only 'src' or 'node_modules'
       "paths": {
         "@file-alias": ["./your/file.tsx"],
         "@folder-alias/*": ["./very/long/path/*", "./very/long/path/"]
       }
     }
   }

4. Go to tsconfig.json.

5. Add the following line to the beginning of the file:

   {
   + "extends": "./tsconfig.paths.json",
     "compilerOptions": {
       "target": "es5",
       ...
     },
     ...
   }

6. Go to package.json.

7. Replace react-scripts with cra-alias, like that:

     "scripts": {
   -   "start": "react-scripts start",
   +   "start": "cra-alias start",
   -   "build": "react-scripts build",
   +   "build": "cra-alias build",
   -   "test": "react-scripts test",
   +   "test": "cra-alias test",
       "eject": "react-scripts eject"
     }