npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@giltayar/ah-theyre-here-esm-nodejs

v1.0.13

Published

![Node.js CI](https://github.com/giltayar/ah-theyre-here-esm-nodejs/workflows/Node.js%20CI/badge.svg)

Downloads

40

Readme

ah-theyre-here-esm-nodejs

Node.js CI

Code accompanying my talk "Aaaaaaaaaaaaaah, They’re Here! ES Modules in Node.JS", whose slides can be found here

Installing

You will need a Node.js version >= 13.2.

First, you install:

$ npm ci
...

Then, you build:

$ npm run build
...

Running the tests

This repository has code in src that is fully checked by tests in the test dir. To run the test, use:

$ npm test
...

About the source code samples directories

The src directory contains all the code samples found in the talk:

  • 01-what-are-es-modules: code that shows a sample of ES module syntax, along with its equivalent CommonJS code. This sample is not comprehensive by any moeans
  • 02-strict: code that shows that ES modules are strict by definition, while CommonJS is not.
  • 03-esm-is-browser-compatible: code that shows that the same ES module code can be used both in the browser and in Node.js, including the use of "import maps".
  • 04-esm-is-statically-parsed code that shows that ES module problems are caught statically before execution of said code.
  • 05-esm-is-async: code that shows sample "top-level await" code. This code does not (yet) run in Node.js and is not tested.
  • 06-exports: code that shows how the "exports" field in package.json works
  • 07-conditional-exports: code that shows how conditional exports work, and a sample dual-mode library that is automatically created from ESM code. See this section for more explanations.
  • 08-migration: code that shows how to migrate CommonJS code to ES module code, bottom up or top down.

Dual-mode packages

See this package source code for how to create an ESM package and automatically convert it to a dual-mode package with additional CJS files.

In essence:

  • The esm directory contains the source code itself, and a package.json that has "type": "module" in it. The "type: "module" is necessary because the names of the files in ESM and CJS must stay the same, and this is only possible if the extension is .js in both cases.
  • The build script uses babel to transpile the esm directory.
  • The .babelrc file includes only the specific plugins necessary to transpile import to package.json.
  • The package.json file includes the dependencies needed on babel* packages.
  • The package.json includes the "exports" for the dual-mode entry points in the esm and cjs directories.