Have you ever found yourself writing imports that look like this?
const { log } = require("../../../utils/util");
This is too cumbersome. No one wants to resolve each path in their head! Luckily, there are a lot of ways to make this much easier. First, if you are using tools like webpack
you can give each path alias, and just import stuff as if it is an external library. But here I will tell you how to Do It Yourself, which is especially important when you don't use bundlers like webpack
.
Below are a few ways to solve this problem.
Use package.json
Suppose your directory structure looks like this:
.
├── package-lock.json
├── package.json
├── src
│ └── components
│ └── sidebar
│ └── atoms
│ └── atom.js
└── utils
└── util.js
and you're trying to import util.js
from src/components/sidebar/atoms/atom.js
.
You can use package.json
to make your own app a dependency! Here's what it will look like:
// src/components/sidebar/atoms/atom.js
const { log } = require("~/utils/util");
log("There is no favorable wind for the sailor who doesn't know where to go");
To achieve that, you need to use a file URL that resolves to the root of your project (.
) in your dependences
:
{
"dependencies": {
"~": "file:."
}
}
After that all you need is to npm install
it, which will create a symlink in node_modules
to your project. This is what the directory structure look like after:
.
├── node_modules
│ └── ~ -> ..
├── package-lock.json
├── package.json
├── src
│ └── components
│ └── sidebar
│ └── atoms
│ └── atom.js
└── utils
└── util.js
I learned this trick from Moshe Kolodny.
node_modules
"hack"
With this neat "hack" you can import the file like you import any other external library:
// src/components/sidebar/atoms/atom.js
const { log } = require("utils/util");
log("There is no favorable wind for the sailor who doesn't know where to go");
To achieve this you can create a node_modules
folder right inside your src
folder. Then, simply put the utils
folder inside it. Due to how module resolution in Node works, the path utils/util
will be first resolved to what is inside the node_modules
you created.
Directory structure:
├── package-lock.json
├── package.json
└── src
├── components
│ └── sidebar
│ └── atoms
│ └── atom.js
└── node_modules
└── utils
└── util.js
Github packages
You can also do it with Github packages. This approach takes more time than the two above and I personally don't use it (yet). But unlike with NPM registry, it is possible to publish private packages for free! So you can just
a) Create a private repo with the code you want to reuse
b) Issue a personal access token
c) Put this in your .npmrc
:
//npm.pkg.github.com/:_authToken=YOUR_TOKEN
registry=https://npm.pkg.github.com/username
d) npm login --registry=https://npm.pkg.github.com
Note that when you are asked to enter a password this is NOT your Github password, but the personal token! Finally,
e) npm publish
Don't forget that Github accepts only scoped packages so it must be named like @username/package
where @username
is your scope.
Once you're done you can install your package by running:
npm install @username/package --registry=https://npm.pkg.github.com
And use it like this:
// src/components/sidebar/atoms/atom.js
const { log } = require("@username/log");
log("There is no favorable wind for the sailor who doesn't know where to go");
Top comments (0)