Modernizing build/bundling

As a contributor to graphiql, I’m impeded by the lack of real-time tooling for the project. I frequently have pause development, run a build, reboot a server, and then am able to test changes in a browser. This adds friction to contributors as there’s numerous hoops to jump through in order to test changes. I propose the following (and can implement if there’s buy-in):

• An npm command for active development. Can be npm run dev or some other variant. It would watch the source files, bundle (NOT minifiy), and start/reboot the example application.
• Implement one of the css pre-processors. There’s numerous vendor issue in the css due to vendor namespacing (I’m looking at you old-ish IE). This would alleviate that by leaning on other tools like http://lessprefixer.com/

I do NOT want to add:

• A heavy-weight build manager, like gulp.
• More npm commands than is necessary.
• Confusion.

Thoughts? This would obviously introduce some more devDependencies like watchify or similar, but I think the value of which would be worth it. I can tell that there was motivation in this project to keep things “slim”, but since it’s grown in popularity and size the lack of these types of tools is a pain that is growing.

[joelgriffith]

@asiandrummer thanks for reading! You’re right correct, the rules are pretty simple. I think the biggest win is just the vendor prefixing at this point (which could probably be implemented by itself apart from a full-blown preprocessor).

I think at a certain point this project will likely need a preprocessor as the feature base grows. My real desire is to just get vendor prefixing (See my PR for IE10/11 support, which took about an hour of battering around to get working since it requires combing through lots of documentation).

I’ll get an initial PR for this over the next few days and we can tease out what we’d like to keep.

[asiandrummer]

@joelgriffith Just wanted to say thanks for your awesome contribution!