Simple File Bundler

1.0.7 · active · verified Wed Apr 22

Simple File Bundler is a command-line utility designed to merge multiple files into a single bundle, primarily focused on concatenating CSS or JavaScript files. It operates via a configuration file (`simple-file-bundle.config.js`) located at the project root, which exports an array of bundling instructions. Each instruction specifies an output endpoint, a list of input files, an optional path prefix, and an optional separator. The package is currently at version 1.0.7, indicating a stable but likely feature-complete state with an infrequent release cadence. Its key differentiator is its minimalist approach, requiring minimal setup for basic file concatenation, contrasting with more complex bundlers that offer advanced features like module resolution, tree-shaking, or minification.

Common errors

```
Error: ENOENT: no such file or directory, open 'src/nonexistent.js'
```
cause One or more files specified in the `files` array or the `endpoint` path do not exist at the resolved location.

fix Verify that all file paths specified in your `simple-file-bundle.config.js` are correct and the files actually exist relative to the `prefix` or the command execution directory.
```
TypeError: Cannot read properties of undefined (reading 'length')
```
cause The `simple-file-bundle.config.js` file is either missing, empty, or does not export an array, or the exported array contains an invalid entry (e.g., missing `files` property).

fix Ensure `simple-file-bundle.config.js` exists in the project root, exports a valid array, and each object in the array has at least `endpoint` and `files` properties defined.

Warnings

gotcha The configuration file `simple-file-bundle.config.js` *must* be located at the root of your project where the `npx create-bundles` command is executed. Misplacing it will result in the bundler not finding any configurations.
Fix: Ensure `simple-file-bundle.config.js` is directly in the project root directory. You can verify the current working directory before running the command.
breaking The package uses CommonJS (`module.exports`) for its configuration file. If you are working in an ES module (`'type': 'module'`) project, you cannot use `export default` directly in the configuration file. You must use CommonJS syntax for `simple-file-bundle.config.js`.
Fix: Always use `module.exports = [...]` in your `simple-file-bundle.config.js` file, even if your main project is ESM. This file is loaded by Node.js as a CommonJS module by the CLI tool.
gotcha Files listed in the `files` array and the `endpoint` path are resolved relative to the `prefix` (if provided) or the directory where the command is run. Incorrect paths will lead to `ENOENT` (file not found) errors.
Fix: Double-check all file paths in your configuration. Use `__dirname` for `prefix` to make paths relative to the config file, or ensure absolute paths are correct.

Install

npm install simple-file-bundler npm
yarn add simple-file-bundler yarn
pnpm add simple-file-bundler pnpm

Imports

ConfigurationArray
wrong:
```
export default [
    { /* bundle settings */ },
    { /* bundle settings */ }
];
```
correct:
```
module.exports = [
    { /* bundle settings */ },
    { /* bundle settings */ }
];
```
The `simple-file-bundle.config.js` file must use CommonJS `module.exports` syntax to define the array of bundle configurations, not ES module `export default`.
BundleSettingObject
wrong:
```
{ files: ['src/file.js'] }
```
correct:
```
{
    prefix: __dirname,
    endpoint: 'dist/bundle.css',
    files: ['src/file1.css', 'src/file2.css'],
    separator: '\n'
}
```
Each object within the configuration array must include `endpoint` and `files` properties. `prefix` and `separator` are optional. Omitting required fields will lead to errors.
__dirname
wrong:
```
prefix: import.meta.url
```
correct:
```
prefix: __dirname
```
When specifying the `prefix` for file paths, the Node.js CommonJS global `__dirname` is commonly used to ensure paths are relative to the config file's directory. `import.meta.url` is for ES modules and is not applicable here.

Quickstart

Demonstrates installation, configuration with `simple-file-bundle.config.js`, and execution of the bundler to concatenate CSS and JS files into specified endpoints.

npm i simple-file-bundler

// simple-file-bundle.config.js
module.exports = [
    {
        prefix: __dirname,
        endpoint: 'dist/style.bundle.css',
        files: [
            'src/style1.css',
            'src/style2.css',
            'src/style3.css'
        ]
    },
    {
        prefix: __dirname,
        endpoint: 'dist/scripts.js',
        files: [
            'src/index.js',
            'src/superScript.js'
        ],
        separator: '\n'
    }
];

// Create some dummy files for demonstration
// src/style1.css
// body { color: red; }
// src/style2.css
// h1 { font-size: 2em; }
// src/index.js
// console.log('Hello from index.js');
// src/superScript.js
// console.log('Hello from superScript.js');

mkdir -p src dist
echo "body { color: red; }" > src/style1.css
echo "h1 { font-size: 2em; }" > src/style2.css
echo "console.log('Hello from index.js');" > src/index.js
echo "console.log('Hello from superScript.js');" > src/superScript.js

npx create-bundles

// Check outputs:
// cat dist/style.bundle.css
// cat dist/scripts.js

view raw JSON →