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:
- 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"
}
Install the folder as a dependency, by running
npm install -S ./pages
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.
Top comments (19)
Impressive boss up!
I can tell Deno guys are getting nervous...
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.
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/...
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.
Do you mind showing us how it works in Deno?
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!
Seems good! But I knew about it earlier.
That’s great, Boss man. 🚀
I’m curious, How often do you use this approach? Have you found any drawback or issues with it?
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 = 💩
😂😂
I would say, show him this article to backup your argument, but we prolly don’t want him to see this comment. 😀
🤣😂🤣 for sure my friend.
Nice one! Does the
-S
option is required?Thanks!
-S
is not required as npm autosaves dependencies from v5.Cool idea man!! Awesome!
Thanks a lot, Julian.
Do you see yourself using it in your projects?
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
Nice one
Thanks @treasurechic . Let me know if you’ll be trying this is your projects.
It's look like it's not possible to do with yarn…