DEV Community

Cover image for Import Javascript subfolder modules like a boss.
Tomide Oladipo
Tomide Oladipo

Posted on

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"
  }
}

Welcome to the boss life!

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.

Discussion (19)

Collapse
dividedbynil profile image
Kane Ong

Impressive boss up!
I can tell Deno guys are getting nervous...

Collapse
tomiiide profile image
Tomide Oladipo Author

Hahaa, I can feel them shaking in their boots.

But isn’t Deno just Node, I haven’t taken a deep dive, but I assume this would work in Deno too.

Collapse
dividedbynil profile image
Kane Ong • Edited

Deno ditches the package.json, so the local packages discoverability affected. For now, importing subfolder modules will remain inconvenient.

For more info:
github.com/denoland/deno_website2/...

Collapse
spez profile image
Abhigyan • Edited

Yep! It works. Deno was made to take NodeJS to a more advance level, but not to degrade it. Ryan Dahl has worked very efficiently on Deno. And I think it will be supported by many companies soo after its stable releases.

Thread Thread
dividedbynil profile image
Kane Ong

Do you mind showing us how it works in Deno?

Thread Thread
spez profile image
Abhigyan • Edited

It's Not the correct ⌚

I currently don't have Deno setup in my PC, and I don't even bother to. I would once when the release become quite stable and it would be the correct time to ditch NodeJS. Till then, STAY HOME STAY SAFE!

See ya!

Collapse
spez profile image
Abhigyan

Seems good! But I knew about it earlier.

Collapse
tomiiide profile image
Tomide Oladipo Author

That’s great, Boss man. 🚀

I’m curious, How often do you use this approach? Have you found any drawback or issues with it?

Collapse
spez profile image
Abhigyan

Not much! But I do use it when I work on my own projects. Because this method isn't quite popular, I can't use it at work. My office BOSS = 💩

Thread Thread
tomiiide profile image
Tomide Oladipo Author

😂😂

I would say, show him this article to backup your argument, but we prolly don’t want him to see this comment. 😀

Thread Thread
spez profile image
Abhigyan

🤣😂🤣 for sure my friend.

Collapse
puf17640 profile image
Julian Pufler

Cool idea man!! Awesome!

Collapse
tomiiide profile image
Tomide Oladipo Author

Thanks a lot, Julian.

Do you see yourself using it in your projects?

Collapse
puf17640 profile image
Julian Pufler

I don't usually get hit by that problem but I will surely keep it in mind and use it when I'm facing this in the future

Collapse
jvretamero profile image
João Vitor Retamero

Nice one! Does the -S option is required?

Collapse
tomiiide profile image
Tomide Oladipo Author

Thanks!

-S is not required as npm autosaves dependencies from v5.

Collapse
treasurechic profile image
Treasurechic

Nice one

Collapse
tomiiide profile image
Tomide Oladipo Author

Thanks @treasurechic . Let me know if you’ll be trying this is your projects.

Collapse
cybernetikweb profile image
B_kodeks

It's look like it's not possible to do with yarn…