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.
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 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.
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.
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.
Join The Discussion! (10 Comments)
Please sign in or sign up for free to join in on the dicussion.
news-zanndo
Not present by default in tsconfig.json
Please sign in or sign up for free to reply
tomgobich
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 thetsconfig.json
.Apologies, I thought I had updated the body text for this lesson noting this, but evidently, I did not. Will do that now.
Please sign in or sign up for free to reply
noctisy
Thank you for the explanation!
Please sign in or sign up for free to reply
tomgobich
Anytime, noctisy!!
Please sign in or sign up for free to reply
n2zb
Hello Tom, what's the difference between imports using subpath starting with
#
and another starting with@
?Please sign in or sign up for free to reply
tomgobich
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: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.
Hope this helps clear things up!!
Please sign in or sign up for free to reply
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?
Please sign in or sign up for free to reply
tomgobich
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 yourpackage.json
to match your feature names (if you want to use import aliases) rather than having one for controllers, models, etc.Please sign in or sign up for free to reply
nidomiro
perfect, thanks :)
Please sign in or sign up for free to reply
tomgobich
Anytime, Nidomiro!! 😊
Please sign in or sign up for free to reply