unenv

What is unenv?

The 'unenv' npm package is designed to provide a universal environment for JavaScript and TypeScript projects. It allows developers to create isomorphic code that can run seamlessly in both Node.js and browser environments by providing polyfills and shims for various APIs.

What are unenv's main functionalities?

Polyfills for Node.js APIs

This feature provides polyfills for Node.js APIs, allowing you to use Node.js-specific features in a browser environment. The code sample demonstrates how to use the Buffer API from Node.js in a universal environment.

const { Buffer } = require('unenv/runtime/polyfills/buffer');
const buffer = Buffer.from('Hello, world!');
console.log(buffer.toString('utf-8'));

Environment Detection

This feature allows you to detect the current environment (Node.js or browser) and execute code conditionally based on that. The code sample shows how to check if the code is running in Node.js or a browser.

const { isNode, isBrowser } = require('unenv');
if (isNode) {
  console.log('Running in Node.js');
} else if (isBrowser) {
  console.log('Running in the browser');
}

Universal Fetch API

This feature provides a universal Fetch API that works in both Node.js and browser environments. The code sample demonstrates how to make a fetch request and handle the response.

const fetch = require('unenv/runtime/polyfills/fetch');
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Other packages similar to unenv

isomorphic-fetch

The 'isomorphic-fetch' package provides a Fetch API implementation that works in both Node.js and browser environments. It is similar to the Fetch API polyfill provided by 'unenv', but it focuses solely on fetch functionality.

universal-env

The 'universal-env' package helps in detecting the current environment (Node.js or browser) and provides utility functions for environment-specific code. It is similar to the environment detection feature of 'unenv'.

node-polyfill-webpack-plugin

The 'node-polyfill-webpack-plugin' package provides polyfills for Node.js core modules in a Webpack environment. It is similar to the polyfills provided by 'unenv', but it is specifically designed for use with Webpack.

README

unenv

Once upon a time, one server was all needed to have a website

... And then SPAs¹ moved server code to browser

... And then SSR² moved browser code to server

... And then Workers³ moved browser/server code to workers

... Workers are neither NodeJS with process or Browser with window

... Yet expected to run code that had to work both of them

[1] Single Page Applications

[2] Server Side Rendering

[3] https://workers.cloudflare.com, https://deno.com/deploy

¯\_(ツ)_/¯

unenv is a collection of modules, polyfills, shims and presets that work perfectly with any Javascript environemnt including Browsers, Workers, NodeJS or pure JavaScript. Goal is that final bundle works consistent regardless of running context yet not adding excessive polyfills.

Install

Install un as devDependency:

yarn add --dev unenv
# or
npm i -D unenv

Usage: Generated env config

Using env utility and builtin presets (node and nodeless), unenv will provide an abstract config that can be used in building pipelines (rollup.js, webpack, etc)

import { env, node, nodeless } from 'unenv'

const { alias, inject, polyfill, external } = env(...presets)

Usage: As a runtime library

Alternatively, instead of using env generator, you can cherry-pick and combine runtime utilities individually in your source.

Runtime library

NodeJS

• fetch.node
• process
• IncomingMessage
• ServerResponse
• METHODS
• STATUS_CODES

net

• IncomingMessage
• ServerResponse
• METHODS
• STATUS_CODES

stream

• Socket

Mocking utilities

• Readable
• Writable

Shims

• proxy
• empty
• noop

polyfills

• consola
• mime-db
• mime
• debug

License

MIT

Changelog

0.3.0 (2021-06-21)

⚠ BREAKING CHANGES

• add exports field

Features

• add exports field (8e8bc1b)