Can HTTP Imports Replace npm? Exploring Deno, ESM, and CDN‑Based Module Loading
From revisiting Deno’s impact on package management to introducing the imove visual workflow library, this article examines HTTP‑based module imports, ESM loaders, CDN services like esm.run, and the challenges of replacing Node’s npm ecosystem, highlighting practical code examples and future directions for JavaScript runtimes.
Background
In 2018 the author wrote “Deno is not the next Node.js!” and now revisits Deno in 2021, noting how Deno changes package management by eliminating npm and enabling simple, low‑cost experimentation.
imove Project
imove is an open‑source, function‑oriented, visual workflow library for JavaScript. It supports:
Workflow visualization : easy drawing and intuitive logic expression.
Logic reuse : nodes can be reused and configured with parameters.
Extensible : a single function can add plugins.
Multi‑language compilation : supports output for JavaScript, Java, etc.
Each node corresponds to a JavaScript file that exports a function (as a Promise). Example of a “login check” node:
<code>import fetch from 'node-fetch';
export default async function(ctx) {
return fetch('/api/isLogin')
.then(res => res.json())
.then(res => {
const { success, data: { isLogin } } = res;
return success && isLogin;
})
.catch(err => {
console.log('fetch /api/isLogin failed, the err is:', err);
return false;
});
}
</code>The library aims to let operations configure logic that developers can assemble, test, and export as code, using X6 graphics and a JSON protocol.
Import‑HTTP
Deno allows importing remote modules via
--allow-net, caching them locally. Similar functionality exists in the Node ecosystem through projects like
import‑http(webpack/rollup plugin) and the
import-http/webpackplugin:
<code>const ImportHttpWebpackPlugin = require('import-http/webpack');
module.exports = {
plugins: [new ImportHttpWebpackPlugin()]
};
</code>After configuration, modules can be imported directly from URLs:
<code>import React from 'https://unpkg.com/react';
import Vue from 'https://unpkg.com/vue';
console.log(React, Vue);
</code>The plugin resolves
http/
httpsimports, caches them in memory and on disk, and works for both browser and Node environments.
esm.run Service
esm.run provides a CDN‑style hosting for JavaScript modules, syncing npm and GitHub packages to Amazon S3 and serving them through various CDNs.
Its architecture diagram:
CJS to ESM Conversion
Tools such as
esmenable converting CommonJS modules to ESM without Babel or bundlers:
<code>require = require('esm')(module);
module.exports = require('./main.js');
</code>Similar conversions are offered by services like jspm.io, skypack.dev, and pika.dev.
Conclusion
Deno’s innovations, HTTP imports, and CDN‑based module services illustrate a shift away from traditional npm‑centric workflows, yet they are not yet sufficient to replace Node.js entirely; the Node community continues to adopt ESM features and may soon embrace HTTP imports.
Taobao Frontend Technology
The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.