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
-
cra-alias
uses standardjsconfig.json
andtsconfig.json
files, so you don't have to create any extra configuration files (likeconfig-overrides.js
) -
cra-alias
automatically generatesmoduleNameMapper
for Jest, according to yourjs(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
-
Go to project's root directory.
-
Create (or open if exists)
jsconfig.json
. -
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/" -
Go to
package.json
-
Replace
react-scripts
withcra-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
-
Go to project's root directory.
-
Create
tsconfig.paths.json
. -
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/" -
Go to
tsconfig.json
. -
Add the following line to the beginning of the file:
{+ "extends": "./tsconfig.paths.json","compilerOptions": {"target": "es5",...},...} -
Go to
package.json
. -
Replace
react-scripts
withcra-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"}