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.
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.
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 is a module loader, a transpiler, a task runner and much more.
In this article we are 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 does not 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.
By now, 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. The reason for that 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 are 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 are 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 have 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, it is not fully supported by all browser or Node.js versions yet. Therefore we need to transpile our code into a more common supported version of JavaScript, ES5.
There are two major tools to achieve this: Typescript & Babel. FuseBox supports both, in fact FuseBox is built with Typescript. Thus it supports 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
srcfolder. - Inside
srcfolder addindex.ts. - Create
fuse.jsin 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; this is an example of Typescript's type system, it tells 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 is 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!
Module Loading
So far, we have been doing just simple console.log examples, let's take it a step further and start learning about module loading. Modules are discreet units of independent, reusable code. In JavaScript there are many ways to create modules.
FuseBox Bundles your code into the CommonJS module format. Unfortunately, this is not supported in browsers, but no need to worry, FuseBox has your back and provides a comprehensive API to make working with modules in the browser a breeze.
Building on our Typescript example let's create some modules and start using them. As we are using TypeScript, we will be using the ES6 module system.
In your src folder, next to index.ts, create hello.ts and add the following to it:
export function hello(name: string) {
return `Hello ${name}`;
}
In index.ts add the following:
import { hello } from "./hello";
const name: string = `Mr. Mike`;
console.log(hello(name));
Now from your command line enter node fuse.js then node dist/app.js, you should see the following written out to your console:
Hello Mr. Mike
Congratulations! You just created and loaded your first module with FuseBox, ES6 and Typescript :)
We have learned how to load local modules, but FuseBox works with external Node packages too. So let’s expand this example and show how we can include Moment.js as a module.
From the command line enter npm install moment -S. This command installs the Moment.js package as a dependency of your project. Now add the following to your index.ts:
import {hello} from "./hello";
import * as moment from "moment"
const time = moment().format('MMMM Do YYYY, h:mm:ss a');
const name: string = `Mr. Mike`;
console.log(hello(name));
console.log(time);
If you now enter node fuse.js, then node dist/index.js you should see the following written out to your console (although the date will obviously be different):
Hello Mr. Mike
June 13th 2017, 11:50:48 am
The full example is available here
Continue reading %Introduction to FuseBox — a Faster, Simpler Webpack Alternative%