A fast, smart, & global content delivery network (CDN) for modern(es2015+) web development.
systemjs.sh provides a fast, global CDN served using the SystemJS module format.
Under the hood It is a simple proxy layer on top of the excellent esm.sh CDN service, powered by esbuild, rollup, Deno and Cloudflare.
The main use case for this service is to off-load bundling budget while targeting SystemJS, specially when providing a third-party service.
This is a live example case of code distributed by a third-party domain
github.io, and executed on a first-party domain netlify.app. The code
imports modules from the systemjs.sh CDN without any pollution nor creation of
global variables (aside from System itself):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to netlify.app</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
SystemJS could be loaded from any CDN (for instance "https://unpkg.com/systemjs/dist/s.min.js")
The only global variable defined will be `System`.
-->
<script src="https://systemjs.sh/systemjs/dist/s.min.js?raw"></script>
<!--
Once `System` is loaded we can add an importmap with maps that are
scoped/limited to our third-party domain (for example: esroyo.github.io).
We are not interferring with other consumers of `System`, if they exist.
-->
<script>
System.addImportMap({
// The first-party code will use vue@latest
"imports": {
"vue": "https://systemjs.sh/vue",
},
"scopes": {
// The third-party code will use [email protected]
"https://esroyo.github.io/systemjs-cdn-examples/": {
"vue": "https://systemjs.sh/[email protected]",
}
},
});
</script>
<!--
Finally, we introduce our third-party service script.
It will use `System` and the scoped importmap.
It will not pollute or collision in any possible way with the netlify.app code.
Our third-party service format is SystemJS with externals.
The "vue" external of that code will resolve to "https://systemjs.sh/[email protected]"
-->
<script src="https://esroyo.github.io/systemjs.sh-examples/dist/assets/index.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// This first-party code will resolve to "https://systemjs.sh/vue"
System.import('vue').then((m) => {
// Will print the "latest" vue version
console.log(`First party code is using vue@${m.version}`);
});
</script>
</body>
</html># build a docker image of this service
docker build -t systemjs.sh .
# run the service on localhost:8000
docker run -p 8000:8000 systemjs.sh