Category: BabelJS

[Babel] Module resolver

tl;dr

A blogpost that demonstrate how to use babel-plugin-module-resolver ? How babel-plugin-module-resolver help developers write better file path ?

Outline

1. Problems
2. Install and configure babel-plugin-module-resolver
3. Configure jsconfig.json/tsconfig.json(TypeScript Project)
4. Configure .flowconfig (for flow-type project)
5. File path IntelliSense extension in VS Code

#1 Problems

In my React Native project, I used to import the component as below,

import SomeComponent from "../../../SomeComponent" 

Using the ../ – dot notation or relative file path to access the component that I put in another folder. If having a large amount of folder or deeply nested folder structure.

It make the code hard to read and most of the time, I can’t recalled where is that component belong to.

So, babel-plugin-module-resolver come to rescue. With babel-plugin-module-resolver , I can write better file path for my React Native project as below:

import SomeComponent from "@shared/SomeComponent";

or

import HomeScreen from "@screens/HomeScreen";

This is the magic power from babel-plugin-module-resolver.

#2 Installation and configuration

Using npm,

npm install --save-dev babel-plugin-module-resolver

or using yarn,

yarn add --dev babel-plugin-module-resolver

Add below configuration to babel config file – .babelrc or babel.config.js

...
plugins: [
  [
     'module-resolver',
     {
       root: ['./],
       alias: {
         '@screens': './src/screens',
         '@shared': './src/shared'
       }
     }
  ]
]

Now, we can import the Homeor Body component by using below syntax

import Home from "@screens/Home";

or 

import Body from "@shared/Body";

#3 Configure jsconfig/tsconfig

Next, configure the jsconfig.json or tsconfig.json file. If not exist, you can create one. This is to enable the IntelliSense for the editor (At least for VS Code)

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@screens/*": ["./src/screens/*"],
      "@shared/*": ["./src/shared/*"]
    }
  }
}

This way we can tell the editor which directory the editor should look into. So that we can have the editor to look for the definition for us.

** tsconfig.json if your project is TypeScript based.

#4 Configure .flowconfig

Using flow-type in your JavaScript ? Chances are you will get warning, such as Cannot resolve module .

Add following configuration into your .flowconfig

module.name_mapper='^@screens/\(.*\)$' -> '<PROJECT_ROOT>/src/screens/\1'
module.name_mapper='^@shared/\(.*\)$' -> '<PROJECT_ROOT>/src/shared/\1'

module.name_mapper=pattern -> mapped directory

Pattern – Regex or specific path pattern.
Mapped directory – The directory flow-type will look for whenever met the pattern we specified

#5 File path intellisense extension (VS Code)

Before configure the babel module resolver, I’m using an extension – Path Intellisense which can help me autocomplete the filename. It’s an useful extension that greatly improve my productivity.

Take away

1. Using babel-plugin-module-resolver to resolve messy file path
2. Configure jsconfig.json or tsconfig.json for intelliSense (autocomplete feature)
3. Configure .flowconfig for flow-type to resolve module correctly

Thanks for reading and have a nice day. 😁

Feel free to let me know, if this article is useful.