Menu
I am starting out with babel.js to make use of JavaScript ES6 features, however I have run in to a problem
I am currently building my app using browserify and reactify with the following command.
browserify -t reactify app/main.js -o public/scripts/bundle.js
Now I want to use an equivalent command in babel to bundle up my required modules, written in ES6 to a bundle.js. This doesn't work, just giving me an ES5 version of the main.js file.
babel app/main.js -o public/scripts/bundle.js
However I could compile my bundle.js file to an ES6 version with babel, having 2 commands
browserify -t reactify app/main.js -o public/scripts/bundle.js
babel app/main.js -o public/scripts/babel.js
Is this the correct way to use babel with browserify? to bundle your modules with browserify and then convert the bundle to ES6?
260
Simply add a "scripts" field to your package. json and put the babel command inside there as build . This will run Babel the same way as before and the output will be present in lib directory, only now we are using a local copy. Alternatively, you can reference the babel cli inside of node_modules .
Babel enables developers to use cutting-edge Javascript without worrying about browser support. Babel is a JavaScript transpiler, meaning it converts a newer version of ECMAScript, such as ES9, to a standard version (ES5).
Babel is a transpiler. It can translate all kinds of high version ECMAScript ( not only ECMAScript, but it's easy to understand) into ES5, which is more widely supported by browsers (especially older versions).
Nope, the correct way is to use babelify.
# from
browserify -t reactify app/main.js -o public/scripts/bundle.js
# to
browserify -t babelify app/main.js -o public/scripts/bundle.js
Also the reactify/react-tools/jsx-loader/etc. tools from the react team do a subset of what babel does, so you can remove them entirely if you're using babel.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
