You have probably seen the ‘@’ symbol in JavaScript imports. It is a module identifier and it depends on the module loader. Have you ever wondered what it really does?. Module loaders are not a part of ECMA script specification. If you have installed babel plugin you have this module loader feature. It avoids the need to write

import Component from '../../../../components/component’

. In fact import Component from '../../../../components/component' doesn’t import but search for it in the node_modules folder. This feature allows you to specify default root source for you JS files. As you already know that you need to install babel plugin for availing this feature we will see how to install the plugin. Run npm install command to install the plugin as given below.

npm install babel-plugin-root-import --save-dev

Then create a .babelrc in the root of your app and configure the settings as given below, you can modify the settings just as you want.

{
 "plugins":
[
      ["babel-plugin-root-import", {
             "rootPathSuffix": "the-preffered/root/of-all-your/js/files",
             "rootPathPrefix": "@" 
         }]
       ] 

  }