systemjs-unpkg's Introduction

systemjs-unpkg

Auto-resolve bare specifiers in SystemJS using UNPKG.

Before

Without this plugin, you have to manually declare individual dependencies in an importmap.

<script type="systemjs-importmap">
{
  "imports": {
    "lodash/": "//unpkg.com/lodash/",
    ...
  }
}
</script>

// Won't work unless the importmap above is declared
const _ = await System.import('lodash');

After^✨

// Automatically resolved without importmap!
const _ = await System.import('lodash');

You can also specify npm semver ranges and tags

const $ = await System.import('[email protected]');

const $ = await System.import('jquery@^2.2.4');

const d3 = await System.import('d3@next');

Here's a starter CodePen template to get you started!

_{If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️}

🙋‍♂️ Why?

⚡️ Simplify SystemJS setup Zero config setup to seamlessly resolve arbitrary bare specifiers with versions!
🔥 Import map fallback Only resolves specifiers that aren't defined in your import map!
🐥 Tiny Only 338B!

🚀 Install

npm i systemjs-unpkg

🚦 Quick Setup

Simply load systemjs-unpkg after you load SystemJS.

If you're using a JS bundler:

// Load systemjs
import 'systemjs';

// Load the systemjs AMD extra, as most npm packages have UMD/AMD distributions
import 'systemjs/dist/extras/amd';

// Load systemjs-unpkg
import 'systemjs-unpkg';

If in a browser:

<!-- Load systemjs -->
<script src="//unpkg.com/systemjs/dist/system.min.js"></script>

<!-- Load the systemjs AMD extra, as most npm packages have UMD/AMD distributions -->
<script src="//unpkg.com/systemjs/dist/extras/amd.min.js"></script>

<!-- Load systemjs-unpkg -->
<script src="//unpkg.com/systemjs-unpkg"></script>

Recommend Projects