EcmaScript Modules for JavaScript are Here!

For years we have been limited by the support of browsers to load javascript and we have had competing module systems, tooling and loaders to work around it. Webpack emerged as the winner for this problem, but because of all the work and complexity that it has to manage, it got slow and had a tangled mess of plugins to support. I have seen a few companies where the webpack config was a scary brittle mash of code that is impossible to untangle. Now with ESM, the industry standard javascript module format, a huge amount of complexity and trouble stands to become obsolete overnight. Eventually, all packages on node.js will ship an ESM version for browser or server.

With ESM support you can now import script just as you would on the server with no additional bundling or transpiling.?There are two important notions to understand.

1.) <script type="module">

The new addition of the module type, allows you to use import foo from 'bar.js'; using the ES2015 syntax we all love. At first you might balk at the amount of requests that this fires off (as the module loader pulls in each dependency) but due to caching and http2 support on the server it just works great.?Inside this new type of script block you can :

import defaultExport from "module-name"
import * as name from "module-name";
import { export1 } from "module-name";        

2.) Dynamic Imports

You can also import directly in <script type="text/javascript"> blocks with a familiar promises based syntax.

import('/modules/my-module.js'
? .then((module) => {
? ? // Do something with the module.
? });)        

3.) <script type="importmap">

<script type="importmap"
{
  "imports": {
    "react": "../../react.js",
    "lodash": "../../lodash.js"
  }
}
</script>        

In order to tell the browser what you mean by import React from 'react', you can provide a map from each import to an es formatted .js file. This doesn't work yet in Firefox, but there are easy shims available that work great. With a bundler like esbuild, you won't have to use this feature, as they take care of bundling any third party depedencies in for you. But the ability to load packages from an import map resolver is an interesting flexible mechanism that you could use for "unbundled development" down the road should the need arise. Bottom line is thanks to ESM you have more options in how to organize and load code without any of the load order or compatibility issues around formats.?

These two new additions to the browser are complete game changers, and a new breed of tooling is rising around it.

esbuild

Esbuild is a new streamlined bundler that is built in go. It's super fast, and only focused on modern js bundling challenges. The plugin ecosystem is a little rugged, but the api is solid and the author is a genius. Out of the box, it does most of the things you want, TypeScript, React, Json module importing, etc. You give it an array of entryPoints, and it will transpile, bundle, treeshake, and code split your modules. I would try to stay on ESM and ES2020 for a target, because really today if you are using esbuild, you shouldn't have to worry about es5 anymore. Instead of complex configuration, you really just make a simple build.mjs script that you have full control over. This is vastly superior to the soup of webpack configuration and plugins that do too much and are a huge risk long term.

Vite

Vite is a bundler that builds more of a complete single page application bundler and server like webpack. It actually uses esbuild under the hood. There was a competitor to Vite called Snowpack that has crumbled under its own weight. Vite is emerging as a bundler to power Vue, React, or the other "not angular" frameworks. If you have a single page application use case, Vite is the go to in 2022.

In conclusion, when browsers accept an industry standard you know that it is the horse to bet on. ESM and HTTP2 are two technologies that will have staying power and eliminate shortcomings that will lead to a faster, better web experience for developers and users. On to the next set of challenges! #javascript #typescript

</httpete>