begoon
begoon13mo ago

What is the difference between importing "preact" via esm.sh or npm:...?

What is the difference between importing "preact" via esm.sh or npm:...? "preact": "https://esm.sh/preact@10.19.2", or "preact": "npm:preact@10.19.2", Seems like both work, but which one is preferable these days?
2 Replies
Deno AI Helper
Deno AI Helper12mo ago
I wasn't able to find the answer to your question in the official Deno documentation. However, I can provide some general insights based on the information you've provided. When you import "preact" via esm.sh, you are using a CDN that is designed to serve ESM (ECMAScript Module) compatible packages. This means that the package is directly usable in Deno, which supports ESM out of the box. The URL you provided includes a specific version of the package, which is good practice to ensure consistent behavior across installations. On the other hand, when you use the npm:preact@10.19.2 syntax, you are referencing the package from the npm registry, but Deno will resolve this import through its own mechanisms to ensure compatibility with Deno's module system. This syntax is part of Deno's built-in compatibility layer for npm packages. Both methods should work, but there might be subtle differences in how the packages are resolved and cached. Using esm.sh might be more straightforward for Deno as it is designed with ESM in mind, while using the npm: prefix could be more familiar if you are transitioning from a Node.js environment or if you want to stay closer to the npm ecosystem. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. It's also a good idea to consider the specific needs of your project and perhaps test both methods to see which one works best for you in terms of performance and compatibility.
marvinh.
marvinh.12mo ago
Both should work. It gets tricky when we take peerDependencies into account with npm packages as we're still working on deduplication support for those

Did you find this page helpful?