RNA Bundler • A JavaScript, CSS and HTML bundler based on esbuild.
Install
The bundler is part of the @chialab/rna
cli, but you can use it as a module.
npm i @chialab/rna-bundler -D
yarn add @chialab/rna-bundler -D
Usage
Compile JS and CSS modules and HTML apps using esbuild
. It can output multiple module formats and it can be used to build a single module or to bundle all dependencies of an application.
Please note that HTML and CSS loaders are separated plugins that needs to be installed in order to work.
Via import
import { build } from '@chialab/rna';
await build({
input: 'index.js',
output: 'dist/esm/index.js',
// code: '...',
// rootDir: '.',
platform: 'browser' // 'node',
format: 'esm', // 'cjs' 'iife'
// globalName: '', // global name for iife modules
sourcemap: true,
minify: true,
});
Via cli
rna build [options] [entry...]
Options:
-C, --config <path> the rna config file
-O, --output <path> output directory or file
--format <type> bundle format
--platform <type> platform destination
--bundle bundle dependencies
--minify minify the build
--public <path> public path
--target <query> output targets (es5, es2015, es2020)
--entryNames <pattern> output file names
--chunkNames <pattern> output chunk names
--assetNames <pattern> output asset names
--clean cleanup output path
--manifest <path> generate manifest file
--entrypoints <path> generate entrypoints file
--name <identifier> the iife global name
--external [modules] comma separated external packages
--no-map do not generate sourcemaps
--jsx <mode> jsx transformation mode (transform, preserve, automatic)
--jsxFactory <identifier> jsx pragma
--jsxFragment <identifier> jsx fragment
--jsxImportSource <name> jsx module name
-h, --help display help for command
Samples
$ rna build src/index.js --output dist/esm/index.js --format esm
$ rna build src/index.js --output public/index.js --format iife --minify --bundle
$ rna build src/index.css --output public/index.css --minify --bundle
Known limitations and workarounds
Esbuild does not merge import statements from the same external source when bundling (see #3). Consumed esbuild bundles in webpack can be affected by a wrong optimization.
Workaround
Update webpack configuration with following rule:
module.exports = {
optimization: {
innerGraph: false,
},
};
License
RNA Bundler is released under the MIT license.