If possible, ignore Internet Explorer completely. All the other current browser versions support ES6 (sans modules). A wonderful little utility called Reify allows you to load ES6 modules in node without transpilation:
Both are fast, even for largish JS projects. Reify allows me to write clean code and tests in Node using bone stock Mocha and Chai configurations. When I need to deploy to the browser, I reach for Rollup.
This method allows me to eliminate a good chunk of the complexity swirling around Babel and its dependents.
As far as React - I found the learning curve quite steep. Once I was comfortable enough with its core concepts, though, I found Riot to be more suitable (and quite a bit simpler) for the medium-sided applications I'm building:
Keeping with the attempt to promote clean code and avoid transpilation, I don't write Riot "tag files" (Riot's version of JSX) but instead use built-in ES6 template strings:
In other words, I strive to base my projects on pure ES6 only. No fancy inline markup. No bleeding-edge ES7 features. Just plain old ES6. When native import/export finally arrives for Node and browsers, there will be almost nothing needed to switch.
I propose getting rid of tools altogether. On a new project, start with the following: a single browser (for bonus, choose the mobile version) and vanilla everything (JS, CSS and HTML). If you need a build step to run your tests or your code, you have gone too far.
Every thing you will ultimately need a build pipeline for is an optimization (bundling, subjectively cleaner code etc). I have found that if you get too hung up on optimizations before you have built something interesting, you have let the tools run away with your project. This is an easy way to lose motivation and become distracted from what you set out to do in the first place.
If possible, ignore Internet Explorer completely. All the other current browser versions support ES6 (sans modules). A wonderful little utility called Reify allows you to load ES6 modules in node without transpilation:
https://www.npmjs.com/package/reify
For packaging those modules to use in a browser, there's Rollup:
http://rollupjs.org/
Both are fast, even for largish JS projects. Reify allows me to write clean code and tests in Node using bone stock Mocha and Chai configurations. When I need to deploy to the browser, I reach for Rollup.
This method allows me to eliminate a good chunk of the complexity swirling around Babel and its dependents.
As far as React - I found the learning curve quite steep. Once I was comfortable enough with its core concepts, though, I found Riot to be more suitable (and quite a bit simpler) for the medium-sided applications I'm building:
http://riotjs.com/
Keeping with the attempt to promote clean code and avoid transpilation, I don't write Riot "tag files" (Riot's version of JSX) but instead use built-in ES6 template strings:
https://muut.com/i/riot-js/using:the-case-for-not-using-riot
In other words, I strive to base my projects on pure ES6 only. No fancy inline markup. No bleeding-edge ES7 features. Just plain old ES6. When native import/export finally arrives for Node and browsers, there will be almost nothing needed to switch.