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('jquery@2.2.4'); 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! ❤️}

• ⚡️ 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!

npm i systemjs-unpkg

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>