Import Javascript subfolder modules like a boss.

Have you worked on a project and find yourself writing code like this?

import { AddBank } from '../../../../pages/add-bank-account'

As projects get bigger, more folders get created, the deeper files are nested. Finding files can be a nightmare, and so does importing files. Having to import files like this might lead to some problems.

1. Inflexible code

At a glance from the example above, it might not seem like a pain to do this, but let's assume our folder structure changes, and we move add-bank-account.js to pages/bank/add-bank-account. We would have to update the import statement in every file it was imported, which can lead to problems, depending on how many people work on the project and how large it is.

2. Hard to build mental models.

While coding, we build mental models, that help us remember things faster. With this import structure, it's hard to figure out where this file is located at a glance, especially if we have multiple files with the same name add-bank-account.js in different parts of our project.

This problem becomes apparent when onboarding a new developer to the codebase. It would be a pain for the newbie to figure out the folder structure of the app and where things are located.

A better way.

What if we could import that function like this instead?

import { AddBank } from '@project/pages/add-bank-account'

If we change our file structure, all we have to do is change this to

import { AddBank } from '@project/pages/bank/add-bank-account'

you would agree with me that this is much cleaner and we wouldn't have the problems associated with the initial approach.

Ready to boss up?

Thanks to the beautiful brains behind Node and npm, we can install folders as node modules. This allow for interesting use cases, including solving our ... problem.

Boss up in 3, 2, 1:

1. Create a package.json in the folder you want to access, in our case /pages

{
"name" : "@project/pages",
"version" : "0.0.1",
"main": "index.js"
}

1. Install the folder as a dependency, by running npm install -S ./pages

2. The folder should be added to your dependencies in the root package.json
   

{
  "name": "boss-subfolder-import",
  "version": "1.0.0",
  "description": "Boss subfolder import",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "ayotomiiide@gmail.com",
  "license": "ISC",
  "dependencies": {
    "@project/pages": "file:pages",
    "express": "^4.17.1"
  }
}

Like and share this post if it was useful to you.

Let me know what you think about this approach in the comments below, whether you agree with it or not.