Life with ESM

ES Modules (ESM) are revolutionizing JavaScript development. Think import and its related functionalities – the modern way to manage JavaScript code.

Modern browsers now fully support ESM, significantly simplifying JavaScript projects, especially if you've moved beyond Internet Explorer.

Before ESM, JavaScript development involved several steps:

1. Fetching packages from npm using package.json and npm install.
2. Writing import statements that weren't strictly valid ESM (for developer convenience), assuming imports from a local node_modules folder.
3. Relying on a bundler to handle these non-standard imports, often for performance optimization and tasks like Babel transpilation.

The rise of ESM is challenging these established practices. Questions are being raised:

• Is npm install really necessary?
• Can we eliminate the need for bundlers?
• With HTTP/2 , global CDNs, and browser optimizations, is bundling still crucial for performance?
• Are we over-compiling our code with excessive down-compilation?

New tools are emerging that embrace the potential of ESM. Snowpack 3, for instance, demonstrates the power of this shift: running React (with JSX) without npm install, node_modules, or a build step, yet still providing a development server and hot reloading. This streamlined approach is incredibly efficient.

WMR (Web Module Runner), another innovative tool, shares a similar philosophy with Snowpack/Skypack. It allows using npm packages without installation, supports JSX, TypeScript, and CSS Modules, and includes features like a dev server and hot reloading.

This trend towards ESM is gaining significant momentum, even on the Node.js side. Sindre Sorhus, a prominent npm package maintainer with over 1000 packages, plans to migrate almost all his packages to ESM, advocating for a single, ESM-only output format. This ecosystem-wide shift significantly impacts browser-based development.

For situations where bundling remains necessary (e.g., npm packages not yet ESM-compatible), next-generation bundlers offer dramatically improved speeds.

The above is the detailed content of Life with ESM. For more information, please follow other related articles on the PHP Chinese website!