Build Bundle

[alexisvincent]

I want to pass the source files through a rollup (with babel), so that I can get a nice single small bundle.

This will also allow easy usage of something like the babel runtime transform.

If anyone has some time and wants to contribute to this project. This is would appreciated.

[jjrv]

I'm currently using systemjs-builder through cbuild to bundle systemjs-hot-reloader (the version in your PR that's not merged yet). The script is here (bundle-reloader) and the resulting bundle is here with a corresponding autogenerated config.js.

cbuild is basically a wrapper around systemjs-builder that finds packages installed using npm. It attaches to the builder's normalize hook so any missing files are looked up using browser-resolve and if found, reported to the builder so it bundles them and added to config.js so SystemJS knows how to transform their paths also at run-time.

I think it works nicely at the moment. With a prebuilt bundle, Babel is then not needed for developing with hot reloading.

[alexisvincent]

cbuild is really interesting. I've been wanting to build a very similar thing for a few weeks now. And I'd really like to speak to you about a bit of possible collaboration. I've sent you a PM on gitter.

With regards to using it here, I still want to babel/rollup, for the following reasons.

1. I'm not wanting to bundle a bunch of external deps. Just some simple code splitting in the project.
2. I don't particularly want to have the module exporting a System.register api
3. I want to make use of babel transforms here
4. Rollup is the simplest way I know how to do what I want

cbuild for me feels like it would be better suited to bundling at the application level

[jjrv]

Yes, it's meant for app level and bundling the reloader was basically a free side effect. If there's a way to create a more minimalistic bundle and with fewer tools, that would be better. systemjs-builder is a bit bloated IMO (depends on Babel and Traceur) but for bigger apps I can't think of an alternative that would play as nicely with SystemJS at run-time.

[alexisvincent]

I think actually that the best way to build this will be with systemjs-builder don't know why I didn't think of this before

[mavericken]

I'm experimenting with using jspm bundle in conjunction with systemjs-hmr & systemjs-hot-reloader. It feels like it shouldn't take much changes, but I haven't gotten it working yet.

[alexisvincent]

Does it complain that it can't find @hot?

[alexisvincent]

If so, add '@hot': {'build': false} to your meta in your config

[mavericken]

Ah, I don't have a build config yet as I am still using the CLI, "jspm bundle". I did "jspm bundle client/**/* - [systemjs-hmr]" and it worked (I'm still on [email protected]).

The way I have it working now seems nice. With everything besides systemjs-hmr in the bundle, initial load is fast, and the hot reload works on individual files so I can see changes immediately and keep my state. Still trying to muddle through more issues though (currently having trouble with hot reload getting bugged out once I rebuild the bundle). Ideally I'll have "jspm bundle --watch" going so that I don't have to deal with stale bundled code later when doing a full refresh.

[peteruithoven]

@mavericken the beta version of jspm supports this, it has a --watch flag.
Before trying this be aware that it uses a slightly different config. Install it by npm install jspm@beta.
More info: jspm.io/0.17-beta-guide/

[mavericken]

I am using the --watch flag. Current problem is that as soon as the bundle.js changes, hot reload breaks completely. It seems I can rather easily work around it by just filtering out bundle.js changes, but trying to figure out the actual problem.

Edit: I figured it out that bug, fix pull request available here: #13

[alexisvincent]

Bundling via rollup