Experiment with webpack+watch to make working on src/bramble/client less painful

[humphd]

I watched one of my students struggle for days with code changes in src/bramble/client/main.js. The reason is that it requires you to run npm run build to create the dist/bramble.js client API that Thimble uses.

I'm not sure what the best way to deal with this would be, from watching that dir and auto-creating it, or somehow not requiring a build step, or something else. But it's pretty crappy right now.

Here is the bit of the Gruntfile that is responsible for it:

https://github.com/mozilla/brackets/blob/master/Gruntfile.js#L276-L292

[gideonthomas]

We can try doing a watch and see if it takes too long

[edyedy123]

Maybe comments on the client files telling developers to run the build or a read me file?
or are you looking for a more technical fix?

[humphd]

A more technical fix, since people don't read docs, and even if they do, it's not always obvious when to do this. There are only a few instances where this file needs to get rebuilt, so it's easy to get it wrong.

One thing we could do is move to using webpack instead of requirejs to build things, and then have it watch for changes that need to be rebuilt. Webpack is module agnostic, and is fine with doing AMD-style modules. There's actually a bit of movement on this front upstream, see https://github.com/adobe/brackets/search?utf8=%E2%9C%93&q=webpack&type=, and also adobe#12006 (comment).

The requirejs build for the Bramble API is actually pretty small, and we might be able to migrate just that over to webpack as a first experiment, and then have it watch for changes to the files in order to rebuild on demand. I'll morph this bug into that.

cc @Pomax, who I think knows quite a bit about webpack.

[Pomax]

Switching over from requirejs to webpack is not trivial - I'd actually advocate using npm-run-all's "run-p" utility ("run these tasks in parallel") and issue something like:

scripts: {
  ...
  "live": "run-p start watch"
  "watch": "chokidar src/main.js -c 'npm run build' --polling"
  ...
}

So when you run npm run live it both runs "npm start" and the "npm run watch" task simultaneously,

The real problem with watching in this specific case is that npm run build takes "forever" compared to just running the code, so all saves to main.js would incur a bit of a waiting period before you can reload the browser and get the latest up to date brackets.