Make Dependency Management Better with URL Imports & Ree.js!

#node #webdev #javascript #bunjs

How to use Ree.js and URL Imports in Node.js

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications. Let's get cooler, shouldn't we?

Ree.js works on Bun too. If you find any problem, please make an issue on github. Feel free to use it over Nodejs.

In this blog post, I will show you how to use Ree.js and URL Imports in Node.js/Bun, and compare them with the traditional way of using npm packages.

What are URL Imports?

URL Imports are a feature that allows you to import modules from URLs instead of local files or npm packages. For example, instead of installing and importing the chalk module from npm, you can import it from a URL like this:

import chalk from "https://esm.sh/chalk@5.3.0";

This way, you don't need to declare any dependencies in package.json and wait for NPM to install every dependency.

URL Imports are supported by some modern JavaScript platforms, such as Deno and Skypack. However, Node.js does not support URL Imports natively yet (they recently added support for it, but it doesn't allow using native node APIs. That's where Ree.js' URL Imports comes into play)

How to use Ree.js and URL Imports in Node.js?

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX/TSX/MDX support, and server-side rendering. Ree.js also supports importing modules from URLs without any experimental flags or hacks.

To use Ree.js and URL Imports in Node.js, you need to do the following steps:

Install @reejs/imports from npm:

npm i @reejs/imports

Import the Import function from reejs/import.js:

import Import from "@reejs/imports";

Use the Import function to import modules from URLs:

let chalk = await Import("https://esm.sh/chalk@5.3.0");
console.log(chalk.green("We Did It!"));

The Import function returns a promise that resolves to the imported module. You need to use the await keyword to get the module. Consider using Import instead of native dynamic import function. Not only it adds additional support, but it also fixes the problems with importing default property seperately (with Import, default property works the same as static import statement).

Alternatively, try out Ree.js x mode!
It adds support for transpiling files and running them directly, as well as Deno's static import syntax for resolving and using URL Imports. Make sure to run npm i -g reejs to install globally first!

Make a file like index.ts:

import chalk from "https://esm.sh/chalk@5.3.0";
//Import function is globally available under our scope too!
//try using `let chalk = await Import("https://esm.sh/chalk@5.3.0");` and watch it work too!
console.log(chalk.green("We Did It!"));

Now run the file with reejs x index.ts. It should work fine!

Why use Reejs and URL Imports over legacy NPM packages?

There are some benefits of using Reejs and URL Imports over legacy NPM packages, such as:

Reduced download size: You don't need to download and install any dependencies or manage any package.json files. You only download the modules you need from URLs. Stop downloading those extra useless resources: README.mds, .gitignores & other files. Download what you actually need!

Improved performance: You don't need to resolve any local files or npm packages. You just fetch the modules from URLs and cache them for faster loading.
Easier updates: You don't need to update any dependencies or package.json files. You just change the URL of the module you want to use, and Node.js will fetch the latest version for you.
More compatibility: You can use modules that are compatible with other JavaScript platforms, such as Deno and Skypack. You don't need to worry about any compatibility issues or polyfills.
Easily serve libraries from local server/private VPS: You can try to serve and cache libraries by running esm.sh to improve loading times on your server side. Or to keep things simple, just upload a code to pastebin or similar services and directly use it here!
Optional dependency loading: If you have ever built a library for developers, chances are there is a dependency which is rarely meant to be used. Installing it straight away when someone installs your library means they're gonna waste extra time and storage. With Reejs, you can use conditional statements and dynamic imports to wait downloading them until required at the last moment. Reejs uses the same trick to keep the initial Reejs download size way small - it doesn't downloads typescript/jsx transpiler unless the one of the files are in .ts or .jsx. Get creative and bring down the download sizes of your clis!

Conclusion

Reejs is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications.

In this blog post, I showed you how to use reejs and URL Imports in Node.js & Bun, and compared them with the traditional way of using npm packages. I hope you found this blog post helpful and learned something new.

If you want to learn more about reejs and URL Imports, you can check out our resources:

Thank you for reading! Bye bye!