[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.

Remove console using babelJS

Remove console.* in JavaScript with babelJS

Prerequisite

  • Project configured with babelJS (Work out of the box in React/React Native)

Installation

Terminal screencast from asciinema
npm install babel-plugin-transform-remove-console --save-dev

Configuration

Create a .babelrc file in your project root folder, below is an example .babelrc for React-Native project.

{
  "presets": [
    "react-native"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-remove-console"
      ]
    }
  }
}
  • Presets (Preset plugins for particular platform or version, eg: react-native, react-app, env or more)

Console.* is useful in debug. Why remove it ?

We shall removed the console.* in our production released to prevent any confidential data leaked that may abused by malicious users.

There is another reason caused by console.*performance issues in JavaScript app.

Therefore, I believed the plugin is a helpful tool, that help us get rid of console.* when released into production.