You Don't Know ESM

beyondcodebootcamp.github.io/presos/javascript-modules/

JavaScript Modules

AJ ONeal

@_beyondcode
twitch.tv/coolaj86
github.com/therootcompany

Deep-Learner

Dangerous Wrong Thinker

Gun for Hire

🐹 Go 📦 Node 🦎 Zig

🛜 Net 🔐 Sec 🐧 POSIX

aj@therootcompany.com

TL;DR

• 3 syntaxes (that work)
• 3 import configs

Should you use it? 💯%

Create / Export

Default Export

let Foo = {};

Foo.noop = function () {};

export default Foo;

Default Import

import Foo from "./foo.js";

void Foo.noop();

Default Require 🥴

let FooMeta = require("./foo.js");
let Foo = FooMeta.default;

void Foo.noop();

Default Export

let Foo = {};

Foo.noop = function () {};

export let noop = Foo.noop;

Full Import 🤕

import * as Foo from "./foo.js";

void Foo.noop();

Full Require

let Foo = require("./foo.js");

void Foo.noop();

The rumors are NOT true...

• async module loading
• tree shaking
• ALL-THE-CONFERENCE-SLIDES!

# ✅
grep -r -F 'Foo.'

// ❌
import { createStutter, getStutter } from "./stuttering.js";

Browser + NPM

let Foo = {};

Foo.noop = function () {};

export let noop = Foo.noop; // for require()
export default Foo; // for import

What about Module Packages?

• index.html
• package.json
• jsconfig.json (tsconfig.json)

index.html

  <form method="dialog"
    onsubmit="FooUI.submit(window.event);"> ... </form>
  <script type="importmap">
    {
      "imports": {
        "foo": "./foo.js",
        "foo/": "./lib/",
        "bar": "./node_modules/bar/index.js"
      }
    }
  </script>
  <script type="module">
    import FooUI from "foo/ui.js";
    window.FooUI = FooUI;
  </script>

package.json

{
  "type": "module",
  "imports": {
    "foo": "./foo.js",
    "foo/": "./lib/",
    "baz": "./vendor/baz.js"
  },
  "exports": {
    ".": "foo.js",
    "./*": "./foo/*"
  }
}

jsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "paths": {
      "foo/*": ["./lib/*"],
      "foo": ["./foo.js"],
      "baz": ["./vendor/baz.js"]
    }
}

Things to Know...

Ubër Async

let Foo = await import('./foo.js')

__dirname

import Path from "node:path";

let modulePath = import.meta.url.slice("file://".length);
let moduleDir = Path.dirname(modulePath);

END

Q&A