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.
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:
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
@nidomiro
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?
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.
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.
