Easy Imports with NodeJS Subpath Imports

In this lesson, we'll learn about NodeJs Subpath Imports and how AdonisJS leverages them to help simplify our import paths throughout our application.

Published
Feb 06, 24
Duration
8m 40s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

Want to dig further into NodeJS Subpath Imports? Checkout the documentation referenced within this lesson here:

https://nodejs.org/api/packages.html#subpath-imports


Update

As of TypeScript 5.4, TypeScript will read and use subpath imports directly from our package.json, meaning we no longer need to redefine them inside our tsconfig.json file.

As such, AdonisJS has now removed these definitions from the tsconfig.json file by default and you only need to define them inside your package.json file.

Join The Discussion! (10 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 8 months ago

    Not present by default in tsconfig.json

    0

    Please sign in or sign up for free to reply

    1. Commented 8 months ago

      Hi news-zanndo! Yes, as of TypeScript 5.4, TypeScript will now automatically use the subpath imports defined within your package.json, meaning we no longer need to redundantly re-define them inside the tsconfig.json.

      Apologies, I thought I had updated the body text for this lesson noting this, but evidently, I did not. Will do that now.

      2

      Please sign in or sign up for free to reply

      1. Commented 7 months ago

        Thank you for the explanation!

        1

        Please sign in or sign up for free to reply

        1. Commented 7 months ago

          Anytime, noctisy!!

          0

          Please sign in or sign up for free to reply

  2. Commented 2 months ago

    Hello Tom, what's the difference between imports using subpath starting with # and another starting with @ ?

    1

    Please sign in or sign up for free to reply

    1. Commented 2 months ago

      Hi n2zb! Imports using the @ character, like @adonisjs/core are actual NPM packages/dependencies installed within our application. The @ character in NPM designates a scoped package. Scoped packages provide a way for the package maintainer to keep all their packages grouped together within the NPM registry. Additionally, it also provides some verification to installers as once a scope is claimed, one the user/organization that claimed the scope may use it.

      For example, since the AdonisJS Core Team claimed @adonisjs only they can register packages using the @adonisjs scope on NPM.

      The # imports, on the other hand, are an actual NodeJS feature called Subpath Imports. These are path aliases pointing to actual files within your project. Let's say we're importing a model:

      import User from '../models/user.js'
      Copied!

      Without using a path alias, we need to traverse to the directory our models are within, for example using ../ to go back a directory. We also need to use the .js extension, required by ES Modules as they resolved and cached as URLs.

      However, if we define a Subpath Import for our models:

      {
        "imports": {
          "#models/*": "./app/models/*.js"
        }
      }
      Copied!

      NodeJS will use this as a reference to fill in the blanks, allowing us to drop the relative paths to the files we're after and simplifying our imports.

      import User from '#models/user'
      Copied!

      Hope this helps clear things up!!

      1

      Please sign in or sign up for free to reply

  3. nidomiro
    Commented 22 days ago

    Hi,
    thanks for creating the series.
    I'm used to creating folders for features and storing controllers, services, … for that feature inside the folder. I like this approach, because it keeps things actually related to each other together.
    Is this also viable for AdonisJS or considered an anti-pattern? If it is considered an anti-pattern, what is the reasoning?

    1

    Please sign in or sign up for free to reply

    1. Commented 21 days ago

      Hi Nidomiro!

      Yep, that's absolutely a valid approach with AdonisJS! I haven't done it myself, but you can check out Romain Lanz's website which uses this setup. He is one of the AdonisJS Core Members.

      You'd need to move some files around to your liking manually, then update the imports within your package.json to match your feature names (if you want to use import aliases) rather than having one for controllers, models, etc.

      1

      Please sign in or sign up for free to reply

      1. nidomiro
        Commented 20 days ago

        perfect, thanks :)

        1

        Please sign in or sign up for free to reply

        1. Commented 20 days ago

          Anytime, Nidomiro!! 😊

          0

          Please sign in or sign up for free to reply