DEV Community

loading...
Cover image for Import files easier with these three tricks

Import files easier with these three tricks

virtualkirill profile image Kirill Vasiltsov Originally published at kirillvasiltsov.com Updated on ・3 min read

Have you ever found yourself writing imports that look like this?

const { log } = require("../../../utils/util");
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

To achieve that, you need to use a file URL that resolves to the root of your project (.) in your dependences:

{
  "dependencies": {
    "~": "file:."
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide