Welcome to the bundler world! about fuse-box

[devmondo]

@sublimeye let me add, that i used every possible bundler on earth, and nothing matches Fuse's simplicity, speed and flexibility.

one of our biggest problems was configuration, and with webpack it is really tedious, JSPM is better in that regard but has its own issues and one of them is that it is slow!, but with Fuse just do npm install and you are done.

on top of that, one of Fuse goals is to add new features that are required in today's fast and complicated world of development, features that would take time to be implemented in others or they might not get implement it at all!

an example of that there are 2 major features we use in Fuse that our project would not have had seen the light without them, Dynamic Modules and Metadata in Decorators. those alone will let us choose Fuse blindly.

i personally have project of 200 TS, JS, HTML, SCSS and CSS files, and Fuse is the only one that bundles them in fraction of second, in fact Fuse was the main reason we switched to Typescript, as compiling TS with it is light years faster than typical workflow!

another important thing to mention is that Fuse code base is simple, i for example was able to submit couple of PRs to fix some issues, and boy it was so easy! i tried to do that with others but their code was beyond my simple mortal skills.

FuseBox is a new breed of next generation tools, it is transparent, fast, and does not manipulate your code, it just does its job.

now everyone has his preferences and philosophy and some may not like Fuse, and my words my sound too biased, but i can tell you that our business wont survive with fluffy claims :)

[nchanged]

Hi Sean!,
I am Ivan, Thanks for the warm welcome! I will certainly do that. I got plenty ideas and techniques.
If you want to have a chat, just poke me here window.atob("c2t5cGU6bmNoYW5nZWQ=")

Cheers

[nchanged]

hi @sublimeye
We use completely different approaches

• FuseBox does not re-generate the source code
• FuseBox is not just a bundler, it is a very powerful module loader with a flexible API
• We use aggressive caching ;-)

fusebox goes for simplicity - the less configuration - the better. You can start working with angular2 having just 3 lines of config, and re-bundle time is less than 100ms. Isn't it great? =)

And it's not yet another bundler ;-) I am sure of its success. We have just started =)

Cheers

[danielearwicker]

I wouldn't say configuration is any more or less convenient to webpack (though maybe I just have really simple configs so I don't know the difference...) In fact the first few things I tried didn't work and I was nearly scared off by the "simple React example" in the readme using Gulp.

But what has instantly blown me away is the speed.

I've been hacking a little vector graphics editor as a demo for some libraries. Just switched it to use fuse and I cannot believe how fast it happens when I change something and hit cmd-S. The browser hot reloads faster than I can perceive it. My brain has blown a fuse!

Here's what I did:

npm install --save-dev fuse-box

Moved my tsconfig.json file into src/ (this is where fusebox will look for it by default - previously mine was at the root, and until I realised this was a problem, it was frustrating. Maybe search up the folder ancestry until you find a tsconfig.json?)

Created fuse.js:

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

FuseBox.init({
    homeDir: "src",
    outFile: "bundle.js",
    plugins: [TypeScriptHelpers()]
}).devServer("> index.tsx")

Suggestion: have fusebox automatically include TypeScriptHelpers plugin when needed! The youtube demo glosses over this, and it happens to work because it never uses __assign etc. So that was another minor snag.

Then to avoid having to install -g anything I add this line to my package.json:

"scripts": {
    "fuse": "node fuse.js"

So then in a terminal I can say

npm run fuse

Open browser at localhost:4444. Brace for sudden accelleration...

This is truly awesome work.

[nchanged]

You guys... try the FuseBox, all right? )
I would love to get some inputs. I have put so much effort into it.

[nchanged]

Thanks!
Hot module reload, and a task runner support is on my list!

[nchanged]

1. You can use it for NodeJS yes
2. One would require a plugin. I don't have it yet. But I will describe the plugin API in details very soon. But in essence, if you don't need any custom pre-compiling, it will work without a plugin

[alonronin]

fist thought is to integrate to webpack 😄

[igl]

Looks very interesting!
First i thought "oh this is not going to have 90% of what i need from webpack" but after i finished reading the README - it's missing only 20% 😉 Good Job Ivan!

[udisun]

Must have plugin support:

1. Postcss
2. Style-loader
3. Json-loader
4. Html-extract-text

[nchanged]

Thanks for your comment!

1. JSON Plugin is there (just forgot to add it to the doc)

2. HTML plugin - in the doc, or would you expect it to behave differently? Check this one out

3. Styles -> you can use CSSPlugin (any ideas on improvements?)

4. SVGPlugin
   https://github.com/fuse-box/react-example/blob/master/src/App.jsx#L2

[udisun]

You're welcome and great work on making this.
Style-loader in webpack would embed the written css code in style tags inside the head of the document. This allowed hmr to work also on css even on isomorphic apps.
In production mode where hmr is not needed anymore all the style tags would be extracted and embedded into a generated css file with the help of extract-text-webpack plugin (https://github.com/webpack/extract-text-webpack-plugin).
Postcss is widely used nowadays, supporting it allows apps to use hundreds of postcss plugins and gain future unreleased css abilities.

[nchanged]

Thanks, will keep that in mind.
the CSSPlugin gets the content and embeds it into the head already. I will check that additional approach.

Thanks for the tip!

[GoNode5]

maybe add livereload to gulp?

[nchanged]

HI!
To gulp? Could u elaborate?!

[GoNode5]

Hi :-) thanx for your endeavor:
I'am an Angular developer. Hot Module is interesting but for now https://www.npmjs.com/package/gulp-livereload would be great to. Your Angular2 example seems fast I'am trying to rebuild it to a more real world example.

[nchanged]

Thank you very much, I will look at it. I have so many features exciting features to implement. So much work ahead. Gotta prioritise! Really looking for any kind of help!
If you could share your example in angular working on Fuse - it would be awesome! I feel like, "hello angular" is not convincing enough ;-)

Thanks

[lovetingyuan]

another wheel, well, but time is not important any more with the help of HMR

[ColCh]

Can it be used for non-FrontEnd environments?

1. Bundle CLI script into single JS file (NodeJs)?
2. Bundle react-native project? (what about custom resolvers -.ios.js and .android.js?)

[thigrand]

Webpack, we shall not forget <3

[sublimeye]

@nchanged Hey Ivan, first off thanks for the great work you've done over here! Although I wonder what were done in a different way from webpack to get so much performance improvement and why didn't you chose to collaborate & integrate those things into weback and instead decided to go with yet another bundler? :)