7 tools transforming JavaScript development

It seems like every year is a bumper year for JavaScript, and 2021 is no different. In particular, a new generation of bundlers and build tools is challenging the inertia of “good enough” tools. Improved speed, a better development experience, and higher-quality production builds are all focus areas of the new breed.

Read on for an overview of the new stable of JavaScript tools. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack, and Vite are the new stars making JS development easier.

ECMAScript modules (ESM)

ECMAScript modules, aka ES modules or ESM, is the official JavaScript module syntax. As such, it is not technically a tool, but it has broad implications for JS development and tools. We’ve seen a fair amount of chaos and uncertainty in JavaScript module usage for a while (with Node.js landing on the CommonJS syntax). But with the recent approval of ESM and its general implementation in browsers, new possibilities are opening up.

The general form of ESM syntax is seen in Listing 1. The first line is the syntax for importing a default export. The second uses destructuring to specify members inside the module.

Listing 1. ESM syntax

import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';

Even Microsoft Edge supports ESM now, so all of the main browsers now support it.

There are two ways the browser makes use of modules: either in the JavaScript scripts it includes, or directly in the special "module" script tag, shown in Listing 2.

Copyright © 2021 IDG Communications, Inc.

Source link