Git Product home page Git Product logo

niksy-node-stdlib-browser's Introduction

node-stdlib-browser

Build Status

Node standard library for browser.

Features:

  • Based on node-libs-browser for Webpack
  • Maintained with newer versions and modern implementations
  • Works with Webpack, Rollup, Vite, esbuild and Browserify, but should also work with other bundlers
  • Exports implementation with node: protocol which allows for builtin modules to be referenced by valid absolute URL strings

Check example to see how modules work in browser environment.

Install

npm install node-stdlib-browser --save-dev

Usage

Webpack

Show me

As of Webpack 5, aliases and globals provider need to be explicitly configured. If you want to handle node: protocol imports, you need to provide helper plugin.

// webpack.config.js
const stdLibBrowser = require('node-stdlib-browser');
const {
	NodeProtocolUrlPlugin
} = require('node-stdlib-browser/helpers/webpack/plugin');
const webpack = require('webpack');

module.exports = {
	// ...
	resolve: {
		alias: stdLibBrowser
	},
	plugins: [
		new NodeProtocolUrlPlugin(),
		new webpack.ProvidePlugin({
			process: stdLibBrowser.process,
			Buffer: [stdLibBrowser.buffer, 'Buffer']
		})
	]
};

If you’re using ESM config, additional configuration is needed to handle unspecified extensions:

// webpack.config.js
module.exports = {
	// ...
	module: {
		rules: [
			{
				test: /\.m?js$/,
				resolve: {
					fullySpecified: false
				}
			}
		]
	}
};

Rollup

Show me

Since many packages expose only CommonJS implementation, you need to apply plugins to handle CommonJS exports. Those packages could have dependencies installed with npm so they need to be properly resolved (taking into account browser-specific implementations).

Some dependencies can have circular dependencies and Rollup will warn you about that. You can ignore these warnings with helper function (reference).

// rollup.config.js
const stdLibBrowser = require('node-stdlib-browser');
const {
	handleCircularDependancyWarning
} = require('node-stdlib-browser/helpers/rollup/plugin');
const { default: resolve } = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const json = require('@rollup/plugin-json');
const alias = require('@rollup/plugin-alias');
const inject = require('@rollup/plugin-inject');

module.exports = {
	// ...
	plugins: [
		alias({
			entries: stdLibBrowser
		}),
		resolve({
			browser: true
		}),
		commonjs(),
		json(),
		inject({
			process: stdLibBrowser.process,
			Buffer: [stdLibBrowser.buffer, 'Buffer']
		})
	],
	onwarn: (warning, rollupWarn) => {
		handleCircularDependancyWarning(warning, rollupWarn);
	}
};

Vite

Show me

Vite config uses combination of Rollup and esbuild plugins. It’s important to use dynamic import when using CommonJS configuration so ESM version of modules is picked up. This allows Vite bundling to use our mocking implementation and implement heuristics such as proper tree-shaking and dead code removal marking.

const inject = require('@rollup/plugin-inject');

const esbuildShim = require.resolve('node-stdlib-browser/helpers/esbuild/shim');

module.exports = async () => {
	const { default: stdLibBrowser } = await import('node-stdlib-browser');
	return {
		resolve: {
			alias: stdLibBrowser
		},
		optimizeDeps: {
			include: ['buffer', 'process']
		},
		plugins: [
			{
				...inject({
					global: [esbuildShim, 'global'],
					process: [esbuildShim, 'process'],
					Buffer: [esbuildShim, 'Buffer']
				}),
				enforce: 'post'
			}
		]
	};
};

esbuild

Show me

Using esbuild requires you to use helper utilities and plugins.

const path = require('path');
const esbuild = require('esbuild');
const plugin = require('node-stdlib-browser/helpers/esbuild/plugin');
const stdLibBrowser = require('node-stdlib-browser');

(async () => {
	await esbuild.build({
		// ...
		inject: [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
		define: {
			global: 'global',
			process: 'process',
			Buffer: 'Buffer'
		},
		plugins: [plugin(stdLibBrowser)]
	});
})();

Browserify

Show me

Bundling ES modules is currently not supported natively in Browserify, but you can try using esmify or babelify for transforming to CommonJS first.

const fs = require('fs');
const path = require('path');
const browserify = require('browserify');
const aliasify = require('aliasify');
const stdLibBrowser = require('node-stdlib-browser');

const b = browserify(
	[
		/* ... */
	],
	{
		// ...
		transform: [[aliasify, { aliases: stdLibBrowser }]],
		insertGlobalVars: {
			process: () => {
				return `require('${stdLibBrowser.process}')`;
			},
			Buffer: () => {
				return `require('${stdLibBrowser.buffer}').Buffer`;
			}
		}
	}
);

Package contents

Module Browser implementation Mock implementation Notes
assert assert
buffer buffer buffer buffer@5 for IE 11 support
child_process
cluster
console console-browserify console
constants constants-browserify
crypto crypto-browserify
dgram
dns dns
domain domain-browser
events events
fs Mocking fs
http stream-http
https https-browserify
module
net net
os os-browserify
path path-browserify
process process process
punycode punycode punycode@1 for browser support
querystring querystring-es3 Contains additional exports from newer Node versions
readline
repl
stream stream-browserify
string_decoder string_decoder
sys util
timers timers-browserify
timers/promises isomorphic-timers-promises
tls tls
tty tty-browserify tty
url node-url Contains additional exports from newer Node versions (URL and URLSearchParams are not polyfilled)
util util
vm vm-browserify
zlib browserify-zlib
_stream_duplex readable-stream
_stream_passthrough readable-stream
_stream_readable readable-stream
_stream_transform readable-stream
_stream_writable readable-stream

API

packages

Returns: object

Exports absolute paths to each module directory (where package.json is located), keyed by module names. Modules without browser replacements return module with default export null.

Some modules have mocks in the mock directory. These are replacements with minimal functionality.

Tips

Mocking fs

fs package doesn’t return anything since there are many different ways you can implement file system functionality in browser.

Examples of implementations:

Node support

Minimum supported version should be Node 10.

If you’re using ESM in Node < 12.20, note that subpath patterns are not supported so mocks can’t be handled. In that case, it’s recommended to use CommonJS implementation.

Browser support

Minimum supported version should be Internet Explorer 11, but most modules support even Internet Explorer 9.

Types

You can use default @types/node types.

License

MIT © Ivan Nikolić

niksy-node-stdlib-browser's People

Contributors

niksy avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.