How Babel, Wepback, Node.js and React work together?

1

Hi Campers,

I don’t know how to set up a project with Babel and Wepback when I working with a Front- and Backend. For React I need Babel, but for Node I need Babel too, but not the Wepback stuff…

I think I just need to setup a babelrc-file for node and a wepback.config.js for react, but could the babelrc-file make problems?

Is there a common technique?

Thanks :slight_smile:

2

I got into that kind of stuff only recently, so I’m far from an expert but the way I see it you got 2 ways of doing it:
a) have 2 entrypoints in your webpack.config.js, one for client one for server
b) only have an entry point for the client but have an extra js file that requires the server js and uses babel-register to transpile that:

   //index.server.js
    require('babel-register')({
      presets: ['es2015', 'react'],
      plugins: ['transform-decorators-legacy', 'transform-class-properties'],
    });
    require('./server');

In my current setup I got hot-reload working for the client stuff and use babel-register for server. When I had 2 entry points it made it so, that hot-reloading wouldn’t really work (and I got that yellow warning that modules don’t know how to reload themselves - so you’d have to manually reload the page). Note that babel-register shouldn’t be used for production though - you’d just serve the pre-transpiled file in production.

Hope that gives you an idea :slight_smile:

3

Webpack, at its core, is a module bundler. It combines your client (or front-end) into compressed files for fast transfer.

Babel is, at its core, a transpiler. It converts between languages that not all browsers can read to languages common to all browsers. (example, ES6 -> ES5, or SASS -> CSS).

Node, obviously, has no use for a module bunder because it isn’t delivered to the client. it sits on a server. You could however write a node app using javascript features not yet implemented in Node and transpile it using Babel.

There are many techniques. For starting out, I’d recommend using create-react-app