Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is Babel needed in an Electron project

I'm quite confused about all the Javascript ecosystem. I'm trying Electron that seems a promising way in creating cross platform apps, leveraging the power of node and Chrome. I create a small app and used some "modern" ( this make a C# programmer laughing ) javascript concepts as lambdas, and it worked out of the box ( I supposed it was natural, since I've the latest version of node ). Then I'm trying to move next, and I see a lot of boilerplating in the examples using for example Babel.

Why do i need this?

If electron works in a up-to date, known in advance, environment with node and chrome up to date, and if I bundle this in a single app, why shouldn't I simply code directly in ESwhatever?

like image 588
Felice Pollano Avatar asked Nov 04 '17 07:11

Felice Pollano


1 Answers

You don't need Babel if you only want features up to ES7 in electron. You have two processes going on the main process and the render process.

Main Process:

  • Uses node (Current node version v7.9.0 on electron v1.7.x)
  • Support ES6/ES7 with 99% coverage, the exceptions are:
    • RegExp.prototype.compile does not return this
    • Symbol.toStringTag does not affect existing built-ins
    • Array.prototype.values (No one supports this anyway)

Render process:

  • Uses chromium (Current chromium version is 58)
  • Supports ES6 99% and ES7 with ~85% coverage, you can increase the support by enabling the experimatal features flag via new BrowserWindow({ webPreferences: { experimentalFeatures: true } }).

Be aware that I would encourage you to use the same version of node that electron uses for development, it will prevent incompatibility issues. you can check this by viewing the .node-version file in the electron repository. At the current version this would be v7.9.0.

There are still valid points to use BableJs if you want to use even newer functions some operators like the spread operator ... nearly all of my projects still use babel with the 'Stage 0' preset for that reason.

Some good lists for checking the supported ES spec and methods

  • Chrome support table
  • Node support table
like image 188
Hans Koch Avatar answered Nov 08 '22 11:11

Hans Koch