Setting up React-project: What does Babelify do?

Question

I'm currently learning how to set up React-projects with npm, Babel and Browserify.

The usage of Babel seems sufficient clear to me: It translates JSX- and ES6-code to ES5-code, which can be run in all browsers.

The same with Browserify: It bundles the npm-packages which I use (React-DOM, React etc.) together with my own code into one large file. These file can then be used for to be deployed to production.

But I struggle to understand what Babelify is for. I have read that it "allows to use Babel with Browserify". A sitepoint-article says that it is "Babel transformer for Browserify".

All these explanations are a bit weird to me because if:

Babel is a transpiler which transpiles JSX, ES6, TypeScript, ... -code to browser-compatible code. Why do I need an additional "transformer" for the output of Babel?

Answer 1

babelify it's browserify transform package.

You can not use plain babel package with browserify. Therefore you should use babelify package, which contains babel inside to be able transform es6 code to es5 using browserify.