A craco plugin for automatic aliases generation for Webpack and Jest.
-
Install craco
-
Install
craco-alias:npm i -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
-
source:
One of"options","jsconfig","tsconfig"
Defaults to"options" -
baseUrl:
A base url for aliases. (./srcfor example)
Defaults to./(project root directory) -
aliases:
An object with aliases names and paths
Defaults to{} -
tsConfigPath:
A path to tsconfig file
Only required whensourceis set to"tsconfig" -
debug:
Enable it if you ran into a problem. It will log a useful info in console.
Defaults tofalse
Specify aliases manually (source: "options")
Note: you don't need to add
/*part for directories in this case
/* 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")
/* 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.pathsproperty.baseUrlis optional for plugin, but some IDEs and editors require it for intellisense.
/* 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")
-
Go to project's root directory.
-
Create
tsconfig.extend.json. -
Edit it as follows:
{ "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" ] } } }
-
Go to
tsconfig.json. -
Extend
tsconfig.jsonfromtsconfig.extend.json:{ + "extends": "./tsconfig.extend.json", "compilerOptions": { ... }, ... } -
Edit
craco.config.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" } } ] };
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent