This package is deprecated, use react-app-alias instead
![npm](https://img.shields.io/npm/v/craco-alias.svg)
A craco plugin for automatic aliases generation for Webpack and Jest.
List of Contents
Installation
-
Install craco
-
Install craco-alias
:
npm i -D craco-alias
yarn add -D craco-alias
-
Edit craco.config.js
:
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
// see in examples section
}
}
]
};
-
Go to Examples section
Options
-
source
:
One of "options"
, "jsconfig"
, "tsconfig"
Optional, defaults to "options"
-
baseUrl
:
A base url for aliases. (./src
for example)
Optional, defaults to ./
(project root directory)
-
aliases
:
An object with aliases names and paths
Only required when source
is set to "options"
-
tsConfigPath
:
A path to tsconfig file
Only required when source
is set to "tsconfig"
-
filter
:
A function of type ([key, value]) => boolean
Optional, used to remove some aliases from the resulting config
Example: ([key]) => !key.startsWith('node_modules')
-
unsafeAllowModulesOutsideOfSrc
:
Allow importing modules outside of ./src
folder.
Disables webpack ModuleScopePlugin
.
-
debug
:
Enable it if you ran into a problem. It will log a useful info in console.
Optional, defaults to false
Examples
Specify aliases manually (source: "options")
> Note: you don't need to add `/*` part for directories in this case
```js
/* craco.config.js */
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "options",
baseUrl: "./",
aliases: {
"@file": "./src/file.js",
"@dir": "./src/some/dir",
// you can alias packages too
"@material-ui": "./node_modules/@material-ui-ie10"
}
}
}
]
};
```
Use aliases from jsconfig.json (source: "jsconfig")
```js
/* craco.config.js */
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "jsconfig",
// baseUrl SHOULD be specified
// plugin does not take it from jsconfig
baseUrl: "./src"
}
}
]
};
```
> **Note:** your jsconfig should always have `compilerOptions.paths` property. `baseUrl` is optional for plugin, but some IDEs and editors require it for intellisense.
```js
/* jsconfig.json */
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
// file aliases
"@baz": ["./baz.js"],
"@boo": ["./boo.jsx"],
// folder aliases
"@root": ["./"],
"@root/*": ["./*"],
"@lib": ["./lib"],
"@lib/*": ["./lib/*"],
// package aliases (types is optional without ts)
"@my-react-select": [
"../node_modules/react-select",
"../node_modules/@types/react-select"
],
"@my-react-select/*": [
"../node_modules/react-select/*",
"../node_modules/@types/react-select"
]
}
}
}
```
Use aliases from tsconfig.json (source: "tsconfig")
1. Go to project's root directory.
2. Create `tsconfig.extend.json`.
3. Edit it as follows:
```js
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
// file aliases
"@baz": ["./baz.ts"],
"@boo": ["./boo.tsx"],
// folder aliases
"@root": ["./"],
"@root/*": ["./*"],
"@lib": ["./lib"],
"@lib/*": ["./lib/*"],
// package aliases
"@my-react-select": [
"../node_modules/react-select",
"../node_modules/@types/react-select"
],
"@my-react-select/*": [
"../node_modules/react-select/*",
"../node_modules/@types/react-select"
]
}
}
}
```
4. Go to `tsconfig.json`.
5. Extend `tsconfig.json` from `tsconfig.extend.json`:
```diff
{
+ "extends": "./tsconfig.extend.json",
"compilerOptions": {
...
},
...
}
```
6. Edit `craco.config.js`:
```js
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
// baseUrl SHOULD be specified
// plugin does not take it from tsconfig
baseUrl: "./src",
// tsConfigPath should point to the file where "baseUrl" and "paths" are specified
tsConfigPath: "./tsconfig.extend.json"
}
}
]
};
```
Ran into a problem?
-
Make sure your config is valid.
-
Set debug
to true
in options.
-
Run application again.
-
Copy a printed info.
-
Here, create an issue describing your problem (do not forget to add the debug info).
If you want to help
Install:
yarn
Use yarn please. npm may fail the dependencies installation.
Run tests:
yarn test