A bit about Babel

Babel is a transpiler for JavaScript that is popular among developers for its ability to turn ES6 or ES7 into code that can run on your browsers and devices.

This is important because most devices and browsers still support older well-established standards like ES5. So developers can write their code in latest conventions and not worry about errors due to incompatibility.

For example, if you write the following JavaScript code (which follows the ES6 standards):

const numbers = [ 5, 10, 15];
console.log(numbers.map(number => number + 5)); // [10, 15, 20]

Babel will compile it to:

var numbers = [ 5, 10, 15];
console.log(numbers.map(function (number) {
  return number + 5;
})); //

This is another plus point about using Babel. You as the developer can write your code in ES6 or ES7, which as we can see above reduces the size of our code. Babel will compile our code to our JavaScript code to browser compatible code.

To add to Babel’s praises, it is the most compatible of all the ES6 transpilers, far surpassing other transpilers like Traceur by Google.

Tip: Use Bit to build apps faster with components. Easily share and reuse components with your team, using them to build new apps! Give it a try.

Here comes Babel 7!

Babel 6 was released in 2015. Since then, it has gone through over 4000 commits and 50 pre-releases. Now, the people at Babel have brought us it’s next major update: Babel 7.

Babel is now faster and comes with an upgrade tool, JavaScript configurations, configuration overrides, options for size minification, support for React’s JSX Fragments, and more importantly… support for TypeScript!

In this post, I will go through some of the major updates and features of Babel 7.

babel-upgrade

As mentioned before, Babel 7 comes with a new upgrade tool called babel-upgrade. This tool will automatically make any upgrade changes in the package.json and .babelrc files.

To use this tool, you can either run it directly on a GitHub repository:

$ npx babel-upgrade

Or you can globally install it using NPM/Yarn:

$ npm i babel-upgrade -g

JavaScript Configuration Files

Babel 7 introduces a new file: babel.config.js. Please know that this file is not a replacement for .babelrc. It simply is a great addition that can be useful for certain use-cases.

Do you want to programmatically create the configuration for your project? Or do you want to compile the node_modules of your project? Then the babel.config.js file is perfect for you!

Here is an example of a babel.config.js file and the kind of code you can add inside it:

module.exports = function () {   
  const presets = [ ... ];   
  const plugins = [ ... ];    
  
  return {     
    presets,     
    plugins   
  }; 
}

A .babelrc file on the other hand, is more of a JSON file instead of a JS file:

{   
  "presets": [...],   
  "plugins": [...] 
}

By adding a babel.config.js file, Babel will easily resolve the configuration instead of looking up from each file until it finds the configuration code. This also allows us to easily perform overrides.

Overrides

Overrides in Babel will allow you to specify different configurations per glob. So if your JavaScript project requires different compilation configurations for its test files, client code, and server code, we won’t have to create a separate .babelrc file for each. Instead, we can do something like this:

module.exports = {   
  presets: [     
    // default config...   
  ],   
  overrides: [
    {     
      test: ["./node_modules"],     
      presets: [       
        // config for node_modules     
      ],   
    }, 
    {     
      test: ["./tests"],     
      presets: [       
        // config for tests     
      ],   
    }
  ] 
};

Speed

Babel 7 comes with a lot of changes that allows us to create builds faster than ever before!

Output Options

In Babel, you can wrap the plugins in an array and pass an options object to it as shown below:

{   
  "plugins": [     
    ["transform-async-to-module-method", {       
      "module": "bluebird",       
      "method": "coroutine"     
    }]   
  ] 
}

Babel 7 has made a few changes to the options like loose of some plugins and added a few new options for other plugins as well.

“Pure” Annotation

Now, when Babel transpiles an ES6 class, it annotates the transpiled class with a /*#_PURE_*/ comment. This tells minifiers like Uglify about something called Dead Code Elimination.

var C =
  /*#_PURE_*/
  function () {
    // code 
}(); 

Support for TypeScript! 🙌

With the help from the good people at TypeScript, Babel is now able to parse TypeScript syntax using a new package called @babel/preset-typescript.

So if you use TypeScript to write an app like this:

interface Hero {
  name: string;
}function Heroes(hero: Hero) {
  return "I am " + hero.name;
}

Babel will transpile it to:

function Heroes(hero) {
  return "I am " + hero.name;
}

JSX Fragment

React 16 has provided use with Fragment, which helps us return multiple children from a component’s render method without having to use a div element as a parent.

render() {   
  return (     
    <>       
      <li>Aquaman</li>
      <li>The Flash</li>
      <li>Wonder Woman</li>     
    </>   
  ); 
}

Babel 7 also supports this awesome feature

render() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "li",
      null,
      "Aquaman"
    ),
    React.createElement(
      "li",
      null,
      "The Flash"
    ),
    React.createElement(
      "li",
      null,
      "Wonder Woman"
    )
  )
}

Automatic Polyfilling

Polyfills are important in JavaScript as they allow us to use other features like Promises and Symbols in environents that don’t even support them. This way, Babel can do more than just change the syntax of our code. It can implement built-in functions and objects.

Macros

Babel started as a ES6 to ES5 code transpiler. But today, it is so much more than that. There are hundreds of plugins that can be used for specific libraries and use cases to improve the overall performance of our app.

But adding these plugins to our app is a task that is easier said than done. For example, if you have created a React App using the create-react-app tool, then you won’t be able to use these plugins. Also, you as the developer will have to know everything about the plugin and how it is going to change your app’s code once you build the app.

A quick solution to this is to install the babel-plugin-macros package in your app. This package not only takes care of configuring your code to be plugin compatible, it also makes it easier to write custom transforms for scenarios that are specific to your app.

Caller Metadata

The @babel/core package also has a new option called caller that will allow us to pass any metadata to our presets and plugins.

babel.transform("code;", {   
  filename,   
  presets: ["@babel/preset-env"],   
  caller: {     
    name: "babel-loader",     
    supportsStaticESM: true,   
  }, 
});

By doing this, Babel has created a new way for tooling to give us better defaults for less configs.

Conclusion

If you are wondering why Babel’s new update is such a big deal, think over the fact that today there are more than 1 million repositories on GitHub that are depending on babel-core alone. Frameworks and Libraries such as React and Vue and giants companies like Netflix and Facebook use Babel in their production level projects.

I hope to see many more amazing updates from the team at Babel. It’s new features like TypeScript support are worth using. Please be sure to send them any feedback that can help them develop Babel to new levels.

I am Rajat S. An aspiring coder who has a long way to go. A Die-Hard DC Comics Fan who loves Marvel Movies. 😛 Thank you for reading! Please do 👏 if you liked it and feel free to comment and ask anything!

Learn more