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);