Here's an interesting bit of knowledge: did you know that you can create and interpret relative file URLs like... actual URLs?
All content covered in this post will only work with ESM
Now, it might be hard to find a practical use for this, but it is undoubtedly very cool π. Enough talk; let's look at some code.
// In your first file:
import './example.js?abc=123';
// In your second file, example.js:
const url = new URL(import.meta.url);
const searchParam = url.searchParams.get('abc');
console.log(searchParam); // β '123'
Here, import.meta.url
is used to display the full URL used to import the module. In this case, for example, it might be:
file:///C:/Some/Folder/Path/example.js?abc=123
From here, we can create an instance of a URL
, which will make it super easy to parse search parameters.
How could this be used?
I have no idea π! Maybe it could be used as a shortcut for very primitive module configuration? For example, using the very popular utility package dotenv
.
Β
Dotenv is supported by the community.
Special thanks to:Dotenv is a zero-dependency module that loads environment variables from a .env
file into process.env
. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.
- π± Install
- ποΈ Usage (.env)
- π΄ Multiple Environments π
- π Deploying (encryption) π
- π Examples
- π Docs
- β FAQ
- β±οΈ Changelog
π± Install
# install locally (recommended)
npm install dotenv --save
Or installing with yarn? yarn add dotenv
ποΈ Usage
Create a .env
file in the root of your project (if using aβ¦
Instead of:
import dotenv from 'dotenv';
dotenv.config({ debug: true });
You could do this! π¦
import 'dotenv/config?debug=true';
I'd love to know your thoughts π
Top comments (6)
Does anybody know how to use this trick with Typescript? Say, I have a TS project with
"type": "module"
inpackage.json
and"module"
set to"esnext"
intsconfig.json
. Then, I have 2 TS files in the same directory, e.g.a.ts
andb.ts
with a line inb.ts
reading:and it works fine after compilation with
tsc
(please notice the use ofa.js
instead ofa
in the import statrement -- this is a requirement for imports of local ESM modules)But... when I replace
import
statement tothen
tsc
throws error that it cannot find module.The only solution that I know is to suppress TS error checking by adding
@ts-ignore
like that:There is limited support for this, add this into your
tsconfig.json
,Have a look at path-mapping
Great article by Lioness100 and thanks @servernoj for asking a thoughtful question and sharing with the DEV community π
Here's an actual usage for you: cache busting the browser's cached resolution of module imports after it has failed. You see, browsers cache the initial loading of a module, including the failure state, so that the runtime does not have to download the same module multiple times. Unfortunately, that means an intermittent network error in your SPA will make it fail consistently.
That's why I published this library to catch those errors and retry by appending a cache busting query parameter to the module path.
I use it in my test harness to create a named test suite by a single import line. Instead of the usual importing
index.min.mjs
and calling the test suite factory:I can import
suite.min.mjs
which recognises the URL parametername
, creates a test suite with the name and exports it:It's a pity that this works only in browsers. Node.js doesn't separate the URL parameters from the file path, which leads to an invalid script path, if they are attached:
This has probably a consequence that the URL parameters can't be used in subpackages either. If a library exposes a subpackage
suite
, for example:it has to be used as-is:
instead of the desired:
which fails:
Related:
WOW! I never thought of that use case, and your findings are really interesting! Thank you so much!! β₯οΈβ₯οΈ