Als-module-bundler NPM

Als-module-bundler

als-module-bundler is a tool designed for converting JavaScript modules and all their imports (to any level of nesting) into a single JS bundle. This bundle is compatible with browsers lacking native modules support. The tool allows integration of various plugins, such as minification, ES5 conversion, and others, enhancing its versatility. It also includes a feature for detecting and reporting circular dependencies. Currently, the bundling process is limited to files located within the 'src' folder, ensuring a focused and efficient module management.

Install

npm i als-module-bundler

Basic Usage

For Node.js:

const builder = require('als-module-bundler');
builder(require('path').join(__dirname, 'modules'));

Or, using ES6 modules:

import builder from 'als-module-bundler';
import { join } from 'path';

// Include als-module-info for additional module information
import getModuleInfo from 'als-module-info';
const { __dirname } = getModuleInfo(import.meta);

builder(join(__dirname, 'modules'));

The builder function in als-module-bundler is specifically designed to search for files with the .mjs extension within the specified srcDir directory. Once it identifies these module files, the builder then proceeds to construct bundles from them.

For each .mjs file found, the builder creates a corresponding bundle file. This bundled file retains the same name as the original module file, but with a different extension: .bundle.js. It's important to note that the bundled file includes only the modules located within the srcDir folder. Any files outside of this directory are not included in the bundle.

The 'bundle' file, which contains all necessary modules, is compatible with browsers lacking native support for module functionality.

Usage in browser after build:

<!-- For browsers with modules support -->
<script type="module" src="path/to/some-module.mjs"></script>

<!-- For browsers without modules support -->
<script nomodule src="path/to/some-module.bundle.js"></script>

Or, dynamically serve the appropriate script based on the client:

res.end(`<html>
   <head>
      ${dev 
         ? `<script type="module" src="path/to/some-module.mjs"></script>`
         : `<script nomodule src="path/to/some-module.bundle.js"></script>`
      }
   </head>
   <body></body>
</html>`);

Using Plugins

Plugins allow you to modify and enhance the JavaScript content during the bundling process. Each plugin function receives the modified JavaScript content (transformed into a function and modified by previous plugins) and should return the new modified content.

Example of a plugin function:

function plugin(jsContent) {
   const newContent = jsContent.replace('some', 'another'); // Apply some modifications
   return newContent;
}

Example for converting JavaScript code to ES5 and minifying it:

Note: Ensure you have installed uglify-js and @babel/core as dependencies.

const builder = require('als-module-bundler');
const UglifyJs = require('uglify-js');
const babel = require('@babel/core');
const srcDir = require('path').join(__dirname, 'modules');

function convertToEs5(jsContent) {
   return new Promise((resolve, reject) => {
      const callback = (err, result) => err ? reject(err) : resolve(result.code);
      const options = { presets: ['@babel/preset-env'] };
      babel.transform(jsContent, options, callback);
   });
}

const minify = (jsContent) => UglifyJs.minify(jsContent).code;

const plugins = [convertToEs5, minify];
builder(srcDir, plugins);

module-bundler es-modules transpiler build-tool dependency-management

als-file-list als-module-info

@everything-registry/sub-chunk-1122

0.1.0

6 months ago