Do you really need Babel?

FuseBox 2.2.3 features an important update which renders Babel useless.

We work hard on delivering the best experience for javascript developers. The recent version of FuseBox features a “pain reliever”. You can now use Typescript compiler to transpile your javascript projects.

Babel offers features that are in proposal, it’s good and bad at the same time. Look at where people ended up being with

import React from "react"

Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution

It’s an old article, but believe it or not, newcomers are still coming from WebPack telling us that FuseBox is broken and their imports are not defined.

Just to be on the same page:

You can’t use import default from a package doesn’t contain export default

import * as React from “react”

Switching to FuseBox

Switching to FuseBox certainly saves lot’s of your time configuring it, not to mention blazing fast build time.

Install FuseBox:

npm install fuse-box typescript --save-dev

Then let’s create a file fuse.js

const { FuseBox, SVGPlugin, CSSPlugin } = require("fuse-box");
const fuse = FuseBox.init({
  homeDir: "src/",
  output: "dist/$name.js",
  experimentalFeatures : true,
  useTypescriptCompiler: true,
  plugins: [SVGPlugin(), CSSPlugin()]
});
fuse.dev();
fuse.bundle("app").instructions("> index.jsx");
fuse.run()

The magic here is in useTypescriptCompiler that forces FuseBox to transpile everything with typescript. Typescript does its job very well. With the preset above you will have all the modern features, including dynamic imports

In fact, this configuration is used to power react-example

fuse-box/react-example

Go ahead and check it out. HMR works out of the box (50ms to re-compile) Tree shaking will be achieved by running node fuse dist

We worked hard on 2.2.3. It features many updates related to developer convenience. For example, CSS dependency extractor.

@import "shared"

When you change shared.scss FuseBox will update the parent file accordingly once the latter is touched. It works with PostCSS and Sass. The best part — you don’t need to configure anything.

And If you do configure, it looks beautiful and clean.

Stay fused