Introduction to FuseBox — a Faster, Simpler webpack Alternative

Original Source: https://www.sitepoint.com/fusebox-faster-webpack-alternative/

webpack has arguably become the de facto JavaScript module bundler, but it has a reputation for being confusing and difficult to learn. In this article, I want to present a faster, simpler webpack alternative — FuseBox.

In today’s rapidly evolving front-end landscape, it’s vital to have a solid grasp of the JavaScript module system. Modules can help organize your code, make it more maintainable and increase its reusability. Unfortunately, browser support for ES modules isn’t quite there yet, so you’ll invariably need a module bundler to stitch them together into a single file which can be delivered to the browser.

FuseBox is a next generation ecosystem of tools that provides for all of the requirements of the development lifecycle. It enables developers to bundle any file format, it’s a module loader, a transpiler, a task runner and much more.

In this article, we’re going to use FuseBox to walk you through the common tasks involved in developing a JavaScript application. These are as follows:

bundling: define an entry point and a bundle name
transpiling: write in TypeScript and target ES5
module loading: combine your modules into one single file
handling other assets: use a FuseBox plugin to compile Sass
hot module reloading (HMR): see your project automatically update to reflect your changes
task running: an introduction to Sparky, FuseBox’s built-in task runner
unit testing: an introduction to FuseBox’s built-in test runner
targeting production: produce a minified, uglified bundle for deployment.

Once you’ve finished reading, you’ll be able to drop FuseBox into your next project and benefit from its speed, simplicity and flexibility.

Bundling — a Basic Example

Disclaimer: I’m one of the core contributors to the project.

Projects are becoming larger — that’s a fact. If we were to include all the files required by the page one by one, this would make things considerably slower, as the browser would have to make a bunch of blocking HTTP requests. Bundling solves this issue and reduces the number of files requested and FuseBox makes this process as easy as possible.

To start bundling, we need to teach FuseBox about what we want. FuseBox doesn’t require much in the way of configuration to bundle heavy projects. In fact, ten lines of configuration are usually enough for most use cases. However, before we start getting into some real-world examples, let’s create something simple.

First, create a new folder. Then, from your command line, navigate to it and enter the following: npm init -y. This will initialize your project. Then type npm install fuse-box -D, which will install FuseBox as a development dependency.

Next create a folder called src which is where all your code will go. Also, create an index.js file in your src folder and add the following content into it:

console.log(‘Hello world’);

Next, create a fuse.js file in the root of your project. This file will contain all your FuseBox configuration.

At this point, our folder structure should look something like this:

MyProject
├── node_modules
├── src
│ └── index.js
├── fuse.js
└── package.json

Add the code below to fuse.js:

const { FuseBox } = require(“fuse-box”);

const fuse = FuseBox.init({
homeDir: “src”,
output: “dist/$name.js”
});

fuse.bundle(“app”)
.instructions(“> index.js”);

fuse.run();

Let’s break this code down section by section.

First, we require FuseBox. Then we initialize a new instance of FuseBox with the init method. This is also called the Producer in FuseBox terms. It’s where we define global configuration for all bundles.

The homeDir option points FuseBox to the home directory of our files. This is because FuseBox creates a virtual file structure that mimics the physical one. The output option tells FuseBox where our output bundle should reside. Notice the $name.js: this is a placeholder that will be replaced with the name you provide to your bundle.

The command fuse.bundle(“app”) is where we tell FuseBox about our bundle. We’re telling FuseBox to create a bundle with the name app.js that will reside in the dist folder in your project. The end file will be project/dist/app.js.

The instructions(‘>index.js’) part is where we tell FuseBox what we want to bundle. The symbol > is what we call an arithmetic instruction: it’s the language FuseBox uses to learn what files need to be bundled.

The command fuse.run() tells FuseBox to start the bundling process.

Now from your command line enter node fuse.js — and that’s it, you’re done! FuseBox will now start its bundling magic and create the bundle at dist/app.js.

The full example is available here.

Transpiling TypeScript and ES6

What we’ve done so far is nice, but this is not how many modern JavaScript projects are developed. Applications today are developed using ES6, which is the sixth major release of the ECMAScript language specification. ES6 is great: it enables new language features like classes, arrow functions and much more. The problem, though, is that it’s not fully supported by all browser or Node.js versions yet. So we need to transpile our code into a more common supported version of JavaScript, ES5.

There are two major tools to achieve this: Typescript and Babel. FuseBox supports both. In fact, FuseBox is built with Typescript, thus supporting it natively.

To get started with FuseBox and Typescript, do the following:

create a new project
using the command line, navigate to the root of this project and do npm init -y
create a src folder
inside src folder, add index.ts
create fuse.js in the root of the project
install FuseBox and TypeScript as dependencies: npm install fuse-box typescript -D.

In index.ts, add the following:

const name: string = “FuseBox”;
console.log(name);

You may be wondering what :string means. It’s an example of Typescript’s type system, telling the compiler that the variable name is of type string. To learn more about Typescript, check the official site.

Add the following to fuse.js:

const { FuseBox } = require(“fuse-box”);

const fuse = FuseBox.init({
homeDir: “src”,
output: “dist/$name.js”
});

fuse.bundle(“app”)
.instructions(“> index.ts”);

fuse.run();

Notice that things are still the same as before, the only difference being that we use the .ts file format instead of .js in instructions(‘>index.ts’). Now that the prerequisites are in place, from your command line enter node fuse.js and FuseBox will start bundling.

The full example is available here.

Note: When using ES6 syntax, FuseBox will automatically detect the module type and transpile the code seamlessly. No need for Babel. FuseBox rocks!

Continue reading %Introduction to FuseBox — a Faster, Simpler webpack Alternative%