Use Aliases in your imports with Babel
Instead of doing this in your imports i.e:
import Component from '../../../components/shared/Header';
You could do something like this from anywhere in your project i.e:
import Component from 'components/shared/Header';
Or you could even go as deep as you want i.e:
import Component from '@/shared/Header';
You get the point... no more relative paths ('../../../../../../'
) to import any of your components.
How?
- Install required dependencies
npm i babel-plugin-module-resolver metro-react-native-babel-preset
Head over to your
babel.config.js
file in your project root directory. (If it doesn't exist, create it)Add the
module-resolver
plugin to your plugins array like this:
module.exports = {
presets: ['module:metro-react-native-babel-preset']
plugins: [
[
'module-resolver',
{
root: ['.'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@': './src/components',
'constants': './src/constants',
'##': './src/examples',
},
},
]
]
};
Make sure to provide the path you want to reference with an alias, and the alias name itself.
According to the example above now you're able to import files or modules like this
import MyComponent from '@/MyComponent.js'
import MyConstantFile from 'constants/myConstant.js'
import MyExample from '##/MyExample.js'
I would love to engage with other developers like you. Get in touch on Twitter! @dev_astador
Top comments (6)
I don't get it, why you and many other articles suggest to create multiple aliases, it is so counter intuitive, and not requires one to memorize all the aliases :))) just create one at the src route and then prefix all others with it, instead of @component, @assets @something else..
just @src/components @src/assets etc... and thats it. simplicity is powerfull.
This article is incomplete for a dev post. What are the pros and cons of this?
I disagree, the core benefit of using aliases is covered at the beginning.
Maybe the core benefit is explained but what about the main drawback.
Everything has pros and cons
I'm late to the party, but I've seen this post have had good traction. In order to answer this for people that might be reading this in the future and want an opinion on this:
You have to try it to see if you like using aliases instead of relative paths in your imports. I particularly like it, but I wouldn't do it for every project. There are two downsides with this approach for me:
also why are you suggesting to install babel plugin as regular dependency not dev Dependency?