How to use fuse-box - 10 common examples

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)

const path = require('path')
const isProduction = process.env.NODE_ENV === 'production' ? true : false

const POSTCSS_PLUGINS = [
  require("postcss-import")({
    root: path.join(__dirname, "src", "ui"),
    resolve: (id, base, options) => resolveId(id, options.root, options),
  }),
  require("postcss-cssnext")({
    browsers: ["ie >= 11", "last 2 versions"],
  })
]

Sparky.task('default', ['clean', 'copy-assets', 'build'], () => {})
Sparky.task('clean', () => Sparky.src(path.resolve("build")).clean(path.resolve("build")))
Sparky.task('clean-cache', () => Sparky.src(".fusebox/*").clean(".fusebox/"))
Sparky.task('copy-assets', () => Sparky.src("assets/**/**.*", {base: "./src/ui"}).dest("build"))
Sparky.task('build', () => {
  const fuse = FuseBox.init({
    alias: {
      "reactstrap-tether": '', // hack to fix `require is not defined` error
      "../../customModules/protocol/index.js": "protocol/index.js", // hack to have working path for app and tests
      "../../customModules/protocol/truffle.js": "protocol/truffle.js"
    },
    cache: !isProduction,
    debug: true,
    experimentalFeatures: true, // remove next major release of fb
    homeDir: 'src',
    //ignoreModules : [],
    log: true,
    modulesFolder: 'customModules',
    output: 'build/$name.js',

const {
  FuseBox,
  Sparky,
  CSSPlugin,
  JSONPlugin,
  EnvPlugin,
  WebIndexPlugin,
} = require('fuse-box')

let ENV = 'development'

let fuse, name

Sparky.task('init', () => {
  fuse = FuseBox.init({
    home: '.',
    output: 'dist/$name.js',
    tsConfig: './tsconfig.json',
    experimentalFeatures: true,
    useTypescriptCompiler: true,
    // sourceMaps: true,
    plugins: [
      CSSPlugin(),
      JSONPlugin(),
      EnvPlugin({ ENV }),
      WebIndexPlugin({
        template: `./src/${name}/index.html`,
      }),
    ],
  })

import { FuseBox, QuantumPlugin, JSONPlugin, RawPlugin } from 'fuse-box'
import { src, task } from 'fuse-box/sparky'
import { resolve } from 'path'
import { argv } from 'yargs'
import { execSync } from 'child_process'
import shabang from './tools/scripts/fuse-shebang'
// import { unlinkSync } from 'fs'

const appName = 'fng'
const outputDir = '.build'
const homeDir = './'
const outputPath = `${outputDir}/${appName}`
const absOutputPath = resolve(outputPath)
const isProdBuild = argv.build

const fuseConfig = FuseBox.init({
  log: false,
  cache: !isProdBuild,
  target: 'server@es5',
  homeDir,
  output: `${outputDir}/$name`,
  globals: {
    default: '*'
  },
  package: {
    name: 'default',
    main: outputPath
  },
  plugins: [
    JSONPlugin(),
    RawPlugin(['.txt']),
    isProdBuild &&

function infernoFuse(name) {
	const { FuseBox, UglifyJSPlugin, ReplacePlugin } = require('fuse-box');
	const isProd = process.argv.includes('--production');
	const fuse = FuseBox.init({
		src: 'packages',
		outFile: 'inferno.fused.js',
		plugins: [
			ReplacePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
			isProd && UglifyJSPlugin()
		],
		rollup: {
			bundle: {
				moduleName: 'Inferno'
			},
			entry: 'packages/inferno/src/index.js'
		},
		debug: true,
		alias: { // this can be automatically assigned
			'inferno-compat': '~/packages/inferno-compat',
			'inferno-component': '~/packages/inferno-component/dist-es',

Sparky.task('config', (context) => {
  fuse = FuseBox.init({
    globals:              { default: '*' }, // we need to expore index in our bundles
    target:               context.target,
    homeDir:              context.home,
    useTypescriptCompiler:true,
    cache:                false,
    hash:                 false,
    // sourceMaps:           {[context.bundleName]: true},
    tsConfig:             'tsconfig-build.json',
    output:               `${context.home}/$name.js`,
    plugins:                         [
      JSONPlugin(),
      EnvPlugin({ NODE_ENV: context.isProduction ? 'production' : 'development' }),
      CSSPlugin(),
      [SassPlugin(), CSSPlugin()],
      ImageBase64Plugin({ useDefault: true }),
      context.isProduction && QuantumPlugin({

await tsc("src", {
        target : "esnext",
        declaration : true,
        outDir : "dist/"
    });
});

task("dist", async context => {
    await context.clean();
    await context.prepareDistFolder();
    await context.dist("esnext", "es7");
    await context.dist("es6", "es6");
    await exec("tsc")
});

task("publish", async () => {
    await exec("dist")
    await npmPublish({path : "dist"});
})

context(class {
    getConfig() {
        return FuseBox.init({
            homeDir: "src",
            globals: { 'default': '*' }, // we need to expore index in our bundles
            target: this.target,
            output: "dist/$name.js",
            cache: !this.isProduction,
            plugins: [!this.isProduction && WebIndexPlugin(),
                this.isProduction && QuantumPlugin({
                    containedAPI: true,
                    ensureES5: false,

useTypescriptCompiler:true,
  alias: {
    'rewire-core':      '~/packages/rewire-core/src',
    'rewire-ui':        '~/packages/rewire-ui/src',
    'rewire-graphql':   '~/packages/rewire-graphql/src',
    'rewire-common':    '~/packages/rewire-common/src',
    'rewire-grid':      '~/packages/rewire-grid/src'
  },
  plugins:                         [
    JSONPlugin(),
    EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
    CSSPlugin(),
    [SassPlugin(), CSSPlugin()],
    WebIndexPlugin({title: 'WorkSight .Next',  path: './', template: 'examples/src/index.html', target: 'index.html' }),
    ImageBase64Plugin({ useDefault: true }),
    isProduction && QuantumPlugin({target: 'browser', uglify: {keep_fnames: true}, treeshake: true})
  ],
  experimentalFeatures:            true
});

rimraf.sync('build');

function runDevelopmentServer() {
  fuse.dev({root: 'build/', port: 3001}, (server) => {
    const app = server.httpServer.app;
    app.use(compression());
    const dist = path.resolve('./build');

    function sendFile(req, res) {
      let url = req.url.split('#').shift().split('?').shift().split('/').pop();
      const p = path.join(dist, url);
      // const p = path.join(dist, req.url);

function infernoFuse(name) {
	const { FuseBox, UglifyJSPlugin, ReplacePlugin } = require('fuse-box');
	const isProd = process.argv.includes('--production');
	const fuse = FuseBox.init({
		src: 'packages',
		outFile: 'inferno.fused.js',
		plugins: [
			ReplacePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
			isProd && UglifyJSPlugin()
		],
		rollup: {
			bundle: {
				moduleName: 'Inferno'
			},
			entry: 'packages/inferno/src/index.js'
		},
		debug: true,
		alias: { // this can be automatically assigned
			'inferno-compat': '~/packages/inferno-compat',
			'inferno-component': '~/packages/inferno-component/dist-es',
			'inferno-create-class': '~/packages/inferno-create-class/dist-es',
			'inferno-create-element': '~/packages/inferno-create-element/dist-es',
			'inferno-shared': '~/packages/inferno-shared/dist-es',
			'inferno-hyperscript': '~/packages/inferno-hyperscript/dist-es',
			'inferno-mobx': '~/packages/inferno-mobx/dist-es',

}),
          NgPolyfillPlugin({
            isServer: true,
            fileTest: 'server.angular.module.ts'
          })
        ]
      })

      // tslint:disable-next-line:no-let
      let prevServerProcess: FuseProcess

      const fuseSw = FuseBox.init({
        homeDir: resolve('node_modules/@angular/service-worker'),
        output: `${browserOutput}/$name.js`,
        target: 'browser@es5',
        plugins: [isProdBuild && UglifyJSPlugin(), CompressionPlugin()] as any
      })
      fuseSw.bundle('ngsw-worker').instructions(' > [ngsw-worker.js]')

      // tslint:disable:no-if-statement
      const vendor = fuseBrowser.bundle('vendor')
      if (!buildOnly) vendor.watch(watchDir)
      vendor.instructions(` ~ ${browserModule}`).completed(fn => {
        isServiceWorkerEnabled &&
          execSync(
            `node_modules/.bin/ngsw-config .dist/public src/app/ngsw.json`
          )
        const serverBundle = fuseServer
          .bundle('server')
          .instructions(` > [${config.fusebox.server.serverModule}]`)

        if (!buildOnly) {