Enable ECMAScript 6 features with React and webpack


#1

I learned React from the glitch examples (thanks!), and I’m working to expand my understanding.

Early on, I decided that webpack was a real drag for development (at least on glitch), since it made refreshes so slow (I had to wait for webpack to do its thing for several seconds after every small change). So I switched to using Babel in the browser. However, once I get closer to releasing something into production, I know I still need to use webpack.

To that end, I created two sample projects and tried to make them as similar as possible with the only difference being babel vs webpack:


My question: anyone know off the top of their head how to enable the newer ecmascript 6 features in the webpack version (notice that Button.jsx isn’t included in that one)? If not, I’ll figure it out, but I’m trying to bask in the sunshine of the broader glitch community’s knowledge if possible :stuck_out_tongue:

Thanks,
Patrick


#2

This can be done by initializing babel-loader in the configuration file; more information can be found here.


#3

Hey Patrick,

Thanks for the samples :slight_smile:

Agreed that webpack starts to slow you down once the project gets big… the trick is to use the webpack --watch mode to get your speed back, and to tell Glitch not to restart the whole project when the webpack-managed files are touched.

It took us some experimentation but we’ve got it pretty nicely ironed out on glitch.com itself. I’d definitely consider this “advanced usage”, but you can follow the story here:

  1. The Webpack config
  2. prestart hook in package.json to set up our special watchers
  3. The webpack watcher
  4. Special watch.json file, which instructs Glitch not to restart when any of the files being watched by the prestart watchers are changed.

In this manner Glitch itself will only restart the app for “big” changes, like modifications of package.json, and then we let Webpack own the build process of the files it cares for.

This is all so that we can use webpack --watch mode, which can quickly monitor and rebuild all the files in a way that we can’t do by doing “cold” builds on change.

…And to answer your question, this project uses ES6 and beyond – check out the webpack config and follow its tentacles into .eslintrc.js and .babelrc for more details.