tupac: Ghetto In-Browser JavaScript Bundler

0.2.3 · abandoned · verified Tue Apr 21

tupac (version 0.2.3) is a command-line tool designed as a minimalistic, zero-configuration JavaScript bundler for in-browser development. It provides features like hot module reloading and code splitting with minimal overhead. Unlike modern bundlers like Webpack, Rollup, or Esbuild, tupac operates by implementing a custom CommonJS-like `require` system directly in the browser, compiling modules asynchronously. Its key differentiators include its extreme simplicity and lack of configuration, making it quick to set up for small, pure JavaScript projects. However, it explicitly states it's 'NOT FOR PRODUCTION' and lacks support for TypeScript, JSX, or comprehensive ES6 module features. The package appears to be abandoned, with no significant updates or active development, reflecting its early-stage version and niche use case as a 'ghetto bundler.'

Common errors

```
ReferenceError: require is not defined
```
cause Attempting to use `require` in a browser environment without tupac's custom bundling and runtime, or outside the scope of a tupac-bundled script.

fix Ensure your script is being served and processed by `tupac` via the `tupac` command. The `require` function is injected by the bundler into the browser environment.
```
SyntaxError: Unexpected token '<'
```
cause Attempting to use JSX syntax (.jsx, .tsx files) in a tupac-bundled application.

fix tupac does not support JSX. Convert your components to pure JavaScript using `React.createElement` or similar patterns, or switch to a bundler that supports JSX (e.g., Webpack, Parcel, Vite).
```
SyntaxError: Cannot use import statement outside a module
```
cause Using ES module `import` syntax within a file processed by tupac, which primarily uses a custom CommonJS-like `require` system.

fix Refactor your module dependencies to use tupac's custom `require('module-name')` syntax. If you need robust ES module support, tupac is not the appropriate tool.

Warnings

breaking tupac is explicitly 'NOT FOR PRODUCTION USE'. It lacks the robustness, security, and optimization features required for production deployments and should only be used for simple development environments.
Fix: For production applications, migrate to modern bundlers like Webpack, Rollup, Parcel, Vite, Esbuild, or Rspack.
gotcha tupac offers 'pure JS only' and 'little support for es6 modules'. It does not support modern JavaScript tooling like TypeScript or JSX, requiring developers to stick to ES5 or older ES6 syntax, and potentially custom solutions for CSS-in-JS.
Fix: If your project requires TypeScript, JSX, or robust ES6+ features, consider alternative bundlers that provide full support and compilation capabilities.
gotcha tupac operates with a custom, in-browser `require` function and places modules and helper globals (`__tupac_modules__`, `__tupac_get_default__`, `process` mock) directly on the `window` object. This deviates from standard CommonJS or ES Module patterns.
Fix: Be aware that module loading and global scope are non-standard. Avoid mixing tupac's `require` with standard ES module `import` statements within the bundled application, as they are incompatible within tupac's runtime.
gotcha The project appears to be abandoned, with no recent updates or active maintenance. This means no new features, bug fixes, or security patches will be released, making it unsuitable for any project requiring ongoing support.
Fix: Evaluate newer, actively maintained bundlers with strong community support and regular updates for any new development or existing projects.

Install

npm install tupac npm
yarn add tupac yarn
pnpm add tupac pnpm

Imports

require

wrong:

import { words } from 'lodash';
const words = require('lodash/words'); // In a Node.js context

correct:

document.body.textContent = require('lodash/words')('Reality is wrong. Dreams are for real.').join(' - ')

tupac implements a custom, in-browser CommonJS-like `require` function, which is distinct from Node.js's native `require` or ES module `import`.

window.addEventListener('hotreload', ...)
```
window.addEventListener('hotreload', ({ detail: module }) => console.log('Hot reloaded:', module));
```
This is the browser API for consuming hot module reload events from the tupac bundler.
__tupac_modules__
```
console.log(window.__tupac_modules__);
```
tupac exposes all bundled module data as a global object on the `window` for introspection and debugging.

Quickstart

Demonstrates how to install tupac globally, create a project, install a dependency, create an entry file using tupac's custom 'require', and start the development server with hot reloading.

mkdir my-thug-project-js && cd "$_"
yarn init -y
yarn add lodash
echo "document.body.textContent = require('lodash/words')('Reality is wrong. Dreams are for real.').join(' - ')" >> app.js
tupac

view raw JSON →