23
loading...
Custom import paths and how it can help you
making your imports more elegant and organized
If there's a pain that bothers me when I'm developing an application with many files, it's when those files import other files, and that causes an excess of
../ in the imports of those files.It is common to see that as our application grows, the folders of our project files are nested more and more inside other folders, and when we least expect it we come across the following import example:
import ExampleComponent from '../../../../../../src/components/ExampleComponent/'The example above is real and is much more common than we think. Unfortunately, the excessive use of these
../ brings some pain when we need to maintain our code, among them, the rework of fixing the relative path every time we need to change the location of an imported file or import file.One of the simplest ways to make this import more elegant and organized is to create a custom path and leave it as an absolute. Thus, the example above could look like this:
import ExampleComponent from '~/components/ExampleComponent/'In the example above, the
~ prefix was set as an absolute path to a directory in our project, in this case the directory is the src folder. That way, no matter what folder our file is in, when we use the ~/ prefix, we will always be importing the absolute path of the src folder.Really good right?!
First of all, we'll need to install and configure three dependencies for this magic to work. And they are:
react-app-rewired and customize-cra
At the root of our project, let's run the command below to customize the webpack settings without the need to use eject and without the need to create a react-scripts fork.
yarn add -D react-app-rewired customize-crababel-plugin-root-import
Now let's run the command below to import files using custom paths.
yarn add -D babel-plugin-root-importAlso at the root of our project we will create a file called
config-overrides.js. He will be responsible for establishing the root folder of our project.Let's insert this code into the file:
const { addBabelPlugin, override } = require('customize-cra')
module.exports = override(
addBabelPlugin([
'babel-plugin-root-import',
{
rootPathSuffix: 'src',
},
])
)Still at the root of our project, we will create a file called
jsconfig.json. He will be responsible for making VSCODE understand the custom paths.Let's insert this code into the file:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
}
}Lastly, we will update the scripts in the package.json file. Leave them this way:
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
}As you can see, we are replacing all
react-scripts with react-app-rewired with the exception of the eject script.Now we can use any file inside our src folder using
~/ at import time.import ExampleComponent from '~/components/ExampleComponent/'If you want to see this example in practice, you can take a look at the template I created for React projects here:
coderamos
/
template-reactjs
This project contains the basic structure for React projects. It also includes my settings for babel-plugin-root-import, eslint-plugin-import-helpers, prop-types, react-router-dom, styled-components and more...
Comment there what you think about this approach in our imports :)
23