How to make a-la webpack "multiple entries" scenario? about fuse-box

[irium]

Turning caching on greatly improved re-building times:

let config = {
    homeDir: "js",
    cache: true,
     plugins: [
        fsbx.BabelPlugin({
            config: {
                sourceMaps: true,
                presets: ["es2015", "react"]
            }
        })
    ]
}

let config1 = Object.assign({}, config, { outFile: "_build/out1.js" })
let fuseBox1 = FuseBox.init(config1);
fuseBox1.bundle(">app2/react.jsx +react +react-dom", false);

let config2 = Object.assign({}, config, { outFile: "_build/out2.js" })
let fuseBox2 = FuseBox.init(config2);
fuseBox2.bundle(">app2/react.jsx +react +react-dom", false);

But how now to make 3rd-party separate "vendor" file?
Just create 3rd out file like above with some "package" config magic and all "requires" will magically work?

[irium]

Finally got it working with the following:

const fsbx = require("fuse-box");

const FuseBox = fsbx.FuseBox;

let config = {
    homeDir: "js",
    cache: true,
     plugins: [
        fsbx.BabelPlugin({
            config: {
                sourceMaps: true,
                presets: ["es2015", "react"]
            }
        })
    ]
}

let config1 = Object.assign({}, config, { outFile: "_build/out1.js" })
let fuseBox1 = FuseBox.init(config1);
fuseBox1.bundle(">app2/react.jsx -react -react-dom", false);

let config2 = Object.assign({}, config, { outFile: "_build/out2.js" })
let fuseBox2 = FuseBox.init(config2);
fuseBox2.bundle(">app2/react.jsx -react -react-dom", false);

let config3 = Object.assign({}, config, { outFile: "_build/vendor.js" })
let fuseBox3 = FuseBox.init(config3);
fuseBox3.bundle("+react +react-dom", false);

And with following HTML:

    <script type="text/javascript" charset="utf-8" src="vendor.js"></script>
    <script type="text/javascript" charset="utf-8" src="out1.js"></script>

But it seems like boilerplate (((
I guess there is need in some plugin like webpack's "CommonsChunkPlugin" that could handle such scenario and automatically extracts all commons into separate output bundle.

I could try to hack on this, but it seems FuseBox plugins has no API to create/specify additional output files :(

[nchanged]

You can bundle anything without an entry point
http://fuse-box.org/#arithmetic-instructions
In essence, entry point is not required

[irium]

Thanks for quick reply :)

I guess there is a lack in documentation.
My goal is not to exclude an entry point, but to have several "bundles" as output at once.

The config above defines that I after executing I want to have three output bundles:

• "main.js" - one SPA application.
• "admin.js" - second independent SPA application
• "vendor.js" - common third-party code

Where "main" and "admin" - are separate entry points.

There's still not clear how to achieve this scenario from provided docs.

It could be fine to see some example how to do it.

[nchanged]

Hi! I am on my phone now, but you can try using FuseBox.import() your entire bundle is available via that API

[nchanged]

You can bundle everything using ./.** and then use
http://fuse-box.org/#import This API to call any files Within that bundle.

Or you can have 2 bundles (they will share the scope)

FuseBox provides much more flexible API than webpack :) read up :)

[irium]

I'm experimenting with all it now, but without much success yet.

[nchanged]

Use globbing to make sure it's all there, then try window.FuseBox.import

[irium]

Try where? In build script or at the client side entry point file?
I"m still don't get :( If I omitting "outFile" in the config, then nothing is creating at all...

[irium]

Again: I need two files as output, not single one.

[nchanged]

You can access any file in a bundle (after it has been bundled) via FuseBox.import
(In browser and on server). Include it as a script tag (your bundle) open developer console and try using FuseBox.import (runtime)

[irium]

As for now, I cann't see other way than simple calling FuseBox twice:

let fuseBox = FuseBox.init({
    homeDir: "js",
    cache: false,
    outFile: "_build/out1.js",
    ...
});

fuseBox.bundle(">app1/react.jsx ...", false);

let fuseBox = FuseBox.init({
    homeDir: "js",
    cache: false,
    outFile: "_build/out2.js",
    ...
});

fuseBox.bundle(">app2/react.jsx ...", false);

[nchanged]

If you need 2 files use 2 instances (you can share your config)

[irium]

That's what I guessed from beginning :(

I end up with this:

const fsbx = require("fuse-box");

const FuseBox = fsbx.FuseBox;

let config = {
    homeDir: "js",
    cache: false,
     plugins: [
        fsbx.BabelPlugin({
            config: {
                sourceMaps: true,
                presets: ["es2015", "react"]
            }
        })
    ]
}

let config1 = Object.assign({}, config, { outFile: "_build/out1.js" })
let fuseBox1 = FuseBox.init(config1);
fuseBox1.bundle(">app2/react.jsx -react -react-dom", false);

let config2 = Object.assign({}, config, { outFile: "_build/out2.js" })
let fuseBox2 = FuseBox.init(config2);
fuseBox2.bundle(">app2/react.jsx -react -react-dom", false);

Problems:

1. How to make third output file with all "vendor" libs? (react, react-dom, react-router etc)
   So all imports should works in above main bundles?

2. If there's common code it will be duplicated and parsed twice :(

I guess FuseBox should support such scenario, that is provided by webpack out-of-the-box.
Seems this is not so uncommon case.

[nchanged]

yes, currently there is only one source, but we can and will improve it :)

[nchanged]

#312

[irium]

Thanks. Will follow it. It seems promising.

[nchanged]

Implemented in 1.4.1