To help you get started, we've collected the most common ways that fuse-box is being used within popular public projects.

skellock / typescript-with-electron-react-kit / fuse.ts View on Github

ReplacePlugin({
        "process.env.HOMEPAGE": pjson.homepage ? `"${pjson.homepage}"` : "null",
      }),
    )

  // and watch unless we're bundling for production
  if (!isProduction) {
    mainBundle.watch()
  }

  // bundle the electron renderer code
  const rendererBundle = fuse
    .bundle("renderer")
    .instructions("> [app/index.tsx] +fuse-box-css")
    .plugin(CSSPlugin())
    .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: "assets", resolve: "assets/" }))

  // and watch & hot reload unless we're bundling for production
  if (!isProduction) {
    rendererBundle.watch()
    rendererBundle.hmr()
  }

  // when we are finished bundling...
  return fuse.run().then(() => {
    if (!isProduction) {
      // startup electron
      spawn("node", [`${__dirname}/node_modules/electron/cli.js`, __dirname], {
        stdio: "inherit",
      }).on("exit", code => {
        console.log(`electron process exited with code ${code}`)
        process.exit(code)

View more ways to use fuse-box

A bundler that does it right

The next version of FuseBox (4.0) will feature major improvements to speed and HMR. See the changelog here.

--

Introduction

FuseBox is a performant bundler/module loader, where you measure you build time in millseconds. It combines the power of Webpack, JSPM and SystemJS.

Blazing fast

FuseBox is extremely convenient for developers. Incremental build of an entire application takes 50 to 100 milliseconds. It requires no configuration to bundle projects such as babel-core.

TypeScript First

FuseBox loves TypeScript, and does not require any additional configuration to support it. It will compile and bundle your code within a fraction of a second, yet it offers a comprehensive loader API. It is packed with features and unfolds limitless possibilities of extending.

Task Runner

FuseBox features a powerfull task runner. It fits perfectly in the modern API of FuseBox while resembling well established concepts behind Gulp.

Plugins

We maintain all of the most used plugins. You can just pick what you need and plug it in. If there's anything missing, let us know!

Highlights

• No headache, minimal configuration
• First class TypeScript support
• Tree shaking
• Code Splitting
• Dynamic imports
• CSS Code splitting
• Blazing fast bundle time
• DevServer and HMR integrate with existing HTTP apps in 1 second!
• Works everywhere for easy universal applications

There is so much more... FuseBox pushes bundling to a whole new level!

Getting Started

Installation

FuseBox has many baked in plugins to help you get started. All you need to do is to install fuse-box using npm or yarn.

npm install fuse-box --save-dev
yarn add fuse-box --dev

Usage

To build a TypeScript application, create a file fuse.js in the root directory of your project:

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

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

fuse.bundle("app").instructions(`> index.ts`);

fuse.run();

And run it!

node fuse

Documentation

You can find a more detailed getting started guide on our website. It will walk you through the basics and give you a solid foundation to dig deeper.

Examples and seeds

You can find many examples and application scaffolds on our here. Don't hesitate to reach out to us on Gitter. Please consult our Contributing guidelines before creating an issue, we're trying to keep it nice and tidy.

React Example

React project using React with Code Splitting + CSS Splitting

Open Collective

FuseBox contributors do this open source work in their free time. If you feel that using FuseBox increases your productivity and you'd like us to invest more time in it, please back us up.

Backers

Support us with a monthly donation and help us continue our activities. Become a backer.

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. Become a sponsor

Contributing

Please consult Contributing Guildelines for details. If you already know it, here's a fastlane to our communication channels:

• Official Documentation
• Submit an Issue
• Make Documentation Better
• Join Gitter Channel

Special thanks to devmondo for incredible ideas, giving inspiration and relentless testing/contributing to the project.

If you like the project, don't forget to star it!