In 2020, go bundler-free

ES modules, import maps, snowpack and web_modules…

Note of past self: “What a time to be alive” oh boy, this intro didn’t age well. On a different note, some of the content below might be relating to an older version of Snowpack. While keeping the same principles, they slightly changed the API and the way you use it. I’d still use it but for ES module package development, I am switching to my own solution, snowdev . In the article linked here, I talk about what snowdev is and also continue the discussion of this present article:

Import maps, a bridge between Node.js and the browser

Write code like it’s 2020 and you don’t need a compilation/transpilation step anymore (subject to terms conditions or limitations™, keep reading).

<script type="importmap">
{
"imports": {
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
import { partition } from "/node_modules/lodash-es/lodash.js";

es-module-shims and node_modules

<script defer src="es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
<script type="module-shim">
import { partition } from "lodash";
// ...
partition(users, 'active');
</script>

The same experience you had 10 years ago when manually including all the script tags with src pointing to your vendors folder.

Snowpack and web_modules

  /* package.json */
"scripts": {
"prepare": "snowpack"
}
<script type="module">
import React from "web_modules/react.js";
// ...
</script>
<script defer src=”web_modules/es-module-shims.js”></script>
<script src=”web_modules/import-map.json” type=”importmap-shim”></script>
<script src=”demo.js” type=”module-shim”></script>
  /* package.json */
"snowpack": {
"webDependencies": [
"three",
"three/examples/jsm/controls/OrbitControls.js",
"dat.gui",
"es-module-shims",
"simplex-noise"
]
}
<script defer src="web_modules/es-module-shims.js"></script> 
<script src="web_modules/import-map.json" type="importmap-shim"></script>
<script src="demo.js" type="module-shim"></script>

Parting words

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Damien Seguin

Tech Lead/Creative Developer @variable_io , Computational Designer, Generative Artisan, Cheese Enthusiast.