How to use absolute (alias) imports in Javascript
In this tutorial, you will Learn how to import javascript or typescript modules with absolute paths in webpack & VSCode. Absolute paths are a great way to import modules in your project. It makes the code cleaner and more readable. You can import modules from anywhere in your project without worrying about the relative path. You can also move files around without breaking the import paths.
Do you often get lost in a sea of relative paths? trying to import a module in a file that is nested deep in your project? This article will show you how to import modules with absolute paths in javascript or typescript projects using webpack and VSCode. This will make your code cleaner and more readable. So let's get started?
Developers love productivity hacks. Get more done in less time, more time for... more coding? Something like that, and I'm no different.
One of my favorite hack is to use absolute paths in my projects, the ability to import modules without worrying about the relative path is a game changer.
Using relative imports works great for small projects, but as your project grows, it becomes difficult to manage the import paths. Absolute imports are a better way to manage import paths in large projects.
Note : This is specific to webpack, if you are not using webpack, It will not work.
What are relative and absolute imports?
In code, relative imports usually looks like this (in ES6):
import anyComponent from '../components/anyComponent'
import someUtil from './utils/someUtil'In this example, the component anyComponent is imported from the relative path ../components/anyComponent.
Why this path is 'relative'? because the path is relative to the current file. The single dot or double dots at the beginning of the import path, followed by the directory separator indicate either the same directory as the current file or a directory one level above. And if we have a large project with a deep hierarchical directory structure, we might end up with relative imports like;
import anyComponent from '../../../../anyComponent'that's going to get difficult to manage and will be a nightmare to maintain.
Why use absolute module imports?
relative imports aren't really that bad and I am asking you to not to use them ever again, sometimes its a good idea to use them. for example, when you are importing a file that is in the same folder as the file you are importing from, it makes sense to use relative imports.
relative imports just work straight and simple, no need to configure anything whereas absolute imports require some configuration to work properly.
Webpack configuration for absolute imports
to enable absolute paths in webpack, you need to add the following configuration to your webpack.config.js file :
module.exports = {
//...
resolve: {
alias: {
'@components': path.resolve(\_\_dirname, 'src/components/'),
'@utils': path.resolve(\_\_dirname, 'src/utils/')
}
}
};now we should be able to use the alias like @components/Button instead of relative paths.
import Button from '@components/Button'
import someUtil from '@utils/someUtil'This looks awesome? No more relative paths hell! 🎉 you don't need to worry if you move your file to another folder, the import will still work!
Use webpack alias in VSCode
Now you can use alias in your project and import from anywhere in your project, Awsome? but you can't use it in VSCode because it doesn't know about it. To fix this you can add the following to your jsconfig.json or tsconfig.json file.
Add a file called jsconfig.js or tsconfig.json in the root of your project and add the following code :
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
//assuming your components/utilities live in ./src
//Update this path as necessary
"@components/\*": ["./src/components/\*"],
"@utils/\*": ["./src/utils/\*"]
}
},
//Add any build/compiled folders here to stop vscode searching those
"exclude": ["node\_modules", "build"]
}You might need to update the paths in config file to match the alias you have set in webpack config file.
Now you should be able to have intellisense for your webpack aliases in VSCode and navigate to the files by clicking on them.
hopefuly this article will help you to use webpack alias in VSCode and make your life easier, setup your project for better development experience.
If you found this article helpful, please share it with your friends and colleagues and don't forget to follow me or subscribe to our newsletter for more helpful articles.
Thank You ;-)
