Craco Configuration
Craco :
Craco stands for creating react app configuration override. It's a tool for configuring the create react app tool and overriding the default configuration. it can be used to configure eslint as well as babel. we will be using it for configuration to avoid messy imports e.ge.
import {anycomponent} from '../../../components/anycomponent/anycomponent.js"
we will be converting this import into something like :
import {anycomponent} from '@components/anycomponent".
so lets get started.
Configuration :
we will be creating a new react app with a typescript template for this purpose in order to end up with a complete and running code. you will also find the link to the Github repo at the end of this tutorial.
Step 1:
Create a simple react app by using npx or yarn. I will be using yarn for this purpose. The command for creating a new project using yarn is :
yarn create react-app craco-configuration --template typescript
NOTE: you should have already installed yarn in order to run this command.
Step 2:
Now you would have a complete project up and running with a basic configuration of typescript.
The project will look something like this
now if we want to import ComponetA inside SubComponentB, the import will look something like this.
import {componentA} from '../../componentA/componentA';
now we move on to the next step of adding babel module resolver in order to get rid of this.
Step 3 :
create a folder in the root folder of a project called config and create a file called craco.config.js inside the config folder and add the following configuration file.
module.exports = {
babel: {
presets: ["@babel/preset-react", "@babel/preset-typescript"],
plugins: [
["@babel/plugin-proposal-object-rest-spread"],
["@babel/plugin-transform-spread"],
["@babel/plugin-proposal-export-default-from"],
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
[
"module-resolver",
{
alias: {
"~": "./src",
},
},
],
],
loaderOptions: (babelLoaderOptions) => babelLoaderOptions,
},
jest: {
configure: { coverageProvider: "v8" },
},
webpack: {
loaders: [{ test: /\.tsx?$/, loader: "ts-loader" }],
},
};
create a file called tsconfig_extends.json in root direcotry of project with the following configuration.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"paths": {
},
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": ".",
"jsx": "react-jsx"
},
"exclude": ["build", "scripts", "acceptance-tests", "webpack"],
"include": ["src"],
"ts-node": {
"pretty": true,
"transpileOnly": true
}
}
add the tsconfig_extends path to the tsconfig file as follows.
Step 4 :
add the craco configuration file path to react strating script inside package.json
craco start --config config/craco.config.js
now exerything is setup all the remaining part is adding installing dependencies and start working with the paths.
Step 5 :
install the following dependencies with one command using yarn add a dependency.
-@babel/preset-typescript
- @babel/plugin-proposal-object-rest-spread
- @babel/plugin-transform-spread
- @babel/plugin-proposal-export-default-from
- @babel/plugin-proposal-decorators
- @babel/plugin-proposal-class-properties
- module-resolver
- babel-module-resolver
- craco
after installing all the dependencies now. we can add paths to the craco config file and tsconfig_extend file to make the imports cleaner.
tsconfig_extend file
craco file
add an index.ts file inside components and export all components using the following code.
now we can import componentA using the following command.
Thank you for reading out. Do share it with fellow developers.
Post a Comment