Express Simple Bundler

Common errors

• Error: Cannot find module 'uglifyjs'

  cause The configured `jsEngine` (e.g., 'uglifyjs') is not installed in your project's dependencies.
  fix Run `npm install uglifyjs` to add the required JavaScript compression engine to your project.

• Error: ENOENT: no such file or directory, open 'public/js/functions.js'

  cause One or more file paths listed in `bundleSettings.bundles[].files` are incorrect or the files do not exist at the specified location.
  fix Carefully verify all file paths in your `bundleSettings` are correct and relative to your project's root directory.

• Bundled files are not appearing in the specified output directory.

  cause The `output` directory specified in `bundleSettings.bundles[].output` might not exist or the Node.js process lacks write permissions.
  fix Ensure that the target output directories (e.g., `public/js/dist/`) exist and that your application has the necessary permissions to write files to them. You might need to create them manually or programmatically before bundling.

• Bundled files are generated but not minified or compressed.

  cause The `compress` option in `bundleSettings` is set to `false`, or the specified `jsEngine`/`cssEngine` is not working correctly.
  fix Set `compress: true` in your `bundleSettings`. Also, ensure that `uglifyjs` and `clean-css` (or your chosen engines) are correctly installed and compatible with your Node.js version.

Warnings

• gotcha The package is in an early development stage (v0.2.0), implying the API might be unstable and subject to breaking changes in future minor versions.
  Fix: Review the package's GitHub repository for any new documentation or changelogs before upgrading, and test thoroughly.
• gotcha The `bundle` function directly writes files to specified output directories, potentially overwriting existing files or requiring specific directory permissions.
  Fix: Ensure the output directories exist and are writable by the Node.js process. Back up any critical files in output directories if there's a risk of unintended overwrites.
• breaking The package relies on `require()` for usage, indicating it's a CommonJS module. Attempting to use `import` syntax will result in errors.
  Fix: Ensure your project is configured for CommonJS, or use `require()` statements when integrating this package. If in an ESM project, consider a wrapper or dynamic import if possible.
• gotcha The `jsEngine` and `cssEngine` options require the respective packages (e.g., `uglifyjs`, `clean-css`) to be installed as direct dependencies in your project, even if not explicitly listed as peer dependencies.
  Fix: Manually install `uglifyjs` and `clean-css` (or your chosen engines) via `npm install uglifyjs clean-css`.

Install

• npm install express-simple-bundler npm
• yarn add express-simple-bundler yarn
• pnpm add express-simple-bundler pnpm

Imports

• bundle
  wrong:

  import { bundle } from 'express-simple-bundler';

  correct:

  const bundler = require('express-simple-bundler');
  bundler.bundle(bundleSettings);

  The package exports the bundle function directly as a CommonJS module. ESM imports are not supported.
• bundle (alternative CommonJS)
  wrong:

  import bundle from 'express-simple-bundler';

  correct:

  const { bundle } = require('express-simple-bundler'); // This works because the default export is a function

  While technically correct due to CommonJS export behavior, the primary pattern is to call the returned function directly. ESM default imports will fail.
• global bundles object
  wrong:

  import { bundles } from 'express-simple-bundler';

  correct:

  // Accessed globally after bundling
  // For example, in a view engine like EJS:
  // <link rel="stylesheet" type="text/css" src="<%= bundles.css[0] %>" />

  The 'bundles' object is made available globally (or via app.locals/res.locals depending on Express setup) after the bundler runs, not imported directly.

Quickstart

Demonstrates how to configure and execute the bundler, creating minified and hashed asset files for an Express application. Includes setup for dummy files and directories for a runnable example.

const bundler = require('express-simple-bundler');

const bundleSettings = {
  compress : true, // Set to true to compress and minify files
  bundles: [
     {name : 'main.js', type:"js",output:"public/js/dist/",files:['public/js/functions.js', 'public/js/another.js']},
     {name : 'main.css', type:"css",output:"public/css/dist/", files:['public/css/style.css', 'public/css/theme.css']}
  ],
  jsEngine: 'uglifyjs', // Specify a JavaScript compression engine
  cssEngine: 'clean-css' // Specify a CSS compression engine
};

// Create dummy files for demonstration purposes
const fs = require('fs');
if (!fs.existsSync('public/js')) fs.mkdirSync('public/js', { recursive: true });
if (!fs.existsSync('public/css')) fs.mkdirSync('public/css', { recursive: true });
fs.writeFileSync('public/js/functions.js', 'console.log("hello");');
fs.writeFileSync('public/js/another.js', 'function greet() { return "world"; }');
fs.writeFileSync('public/css/style.css', 'body { margin: 0; }');
fs.writeFileSync('public/css/theme.css', '.container { padding: 10px; }');

// Ensure output directories exist before bundling
if (!fs.existsSync(bundleSettings.bundles[0].output)) fs.mkdirSync(bundleSettings.bundles[0].output, { recursive: true });
if (!fs.existsSync(bundleSettings.bundles[1].output)) fs.mkdirSync(bundleSettings.bundles[1].output, { recursive: true });

// Execute the bundler
bundler.bundle(bundleSettings);

console.log('Bundling complete. Check public/js/dist/ and public/css/dist/ for output.');
// In a real Express app, 'bundles.js' and 'bundles.css' would now be available in your views.