Autobundler NPM

Autobundler

The refreshingly easy tool for bundling your ESNext web app

Looking for a starting point with Autobundler? Check out the Autobundler seed project!

[ Installation | Setup | Usage | Configuration | Modules | FAQ ]

Autobundler is still under construction.

See the project milestones for issues to resolve before reaching 1.0.

Feel free to aid development by adding issues and pull requests!

Install with NPM

npm install --save-dev autobundler

Setup

Autobundler requires a directory setup like the following:

src/
  app.js
  app/
    file.js
    subfolder/
      file.js

src/app.js is what Autobundler considers a "top-level file". It's where you import your dependencies and local modules.

From inside src/app.js:

// NPM modules only needed to be imported once, and are available from the global scope.
import 'jquery';
import 'lodash';
import 'angular';

// Make sure the folder containing your
// modules matches the top-level file's name.
// In this example, that would be 'app/'.
import someModule from 'app/file';
import nestedModule from 'app/subfolder/file';

// Do stuff

And from inside src/app/file.js:

// Import neighboring modules and libraries as needed.
// Files imported here aren't bundled by Autobundler,
// so no need to worry about duplication.
import neighborModule from 'app/neighbor';

export default function(){
  // Do stuff
}

When Autobundler runs, it builds a set of files per top-level file:

The top-level file, compiled to ES5 with appropriate SystemJS tags
A similarly compiled bundle of the top-level file's local modules
A bundle of the top-level file's imported dependencies

Those files are then rolled up into a single file, ready for a System.import() into your views.

Usage

See below for configuration options

Inside package.json:

"scripts": {
	"build": "autobundler source=src"
}

Inside index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Your Awesome JavaScript App</title>
  ...
</head>

<body>
  ...
  <script src="system.js"></script>
  <script src="autobundler.config.js"></script>
  <!-- make sure to put your own system.config file after autobundler's -->
  <script src="your.system.config.js"></script>

  <script>
    System.import('path/to/destination/folder/app');
  </script>

</body>
</html>

Open a command prompt, type npm run build, hit enter and relax while Autobundler does the rest.

Yup, that's really all you need!

Configuration Options

In the name of simplicity, Autobundler has a tiny number of configuration object, of which only one is required.

Name	Description	Default Values
source	Top-level directory for your local JavaScript files. Required	`undefined`
destination	Directory where Autobundler will output its generated files.	`dist`
docs	Whether Autobundler should generate documentation from JSDoc comments.	`true`
angular	Specifies whether to run angular-specific functions during compilation.	`false`

You can pass these as command line arguments or include them in an "autobundler" field in package.json. (For reference: command line arguments take precendence.)

NPM Modules

Autobundler keeps a database of file locations for a variety of modules, including Angular, React, JQuery, Lodash, and more. Just npm install <module-name>, then import <module-name> into your top-level file.

For the full list, see the docs.

Missing a library? Open an issue or submit a PR!