Introduction to Babel

综合技术 2017-10-12

This article is part of a series. You may start from where we left off or clone the git repo and checkout this branch like so.

git clone  
cd webpack-course  
git checkout babel1  

Life is getting pretty happy for our Developer Experience. So far we’ve only used part of the real power of javascript. We’ve been limited by what what features of javascript our current browser can run. When you’re developing in Chrome Canary, everything looks peachy, but ship this same stuff to internet explorer or android and we start seeing syntax errors. Old browsers don’t know it, but we still want to use it. Enter the transpilers to turn shiney new syntax into totally usable old syntax.

Babel is an integral part of Webpack's power. It was created by Facebook and, much like Webpack, it dominates the javascript transpiling community.

Let’s get it setup in our project before I talk about it too much.

So first thing’s first, create a .babelrc file in our project root and install babel-core.

yarn add babel-core
touch .babelrc

.babelrc will contain the rules babel live by. What features of javascript do we want to use with this project?

What a strange and interesting question. The babel website will be crucial to look up tools you may need. The community is large and prolific, having covered all of javascript’s various specifications, they went on to write transpiling plugins for various flavors and new languages. All compiling to any other flavor of javascript.

So for example, let's say we want to use those nifty arrow functions in ES6. In main.js add:

var a = () => {
  console.log("Hello from the future!")

Babel provides a plugin for that. Let’s install that and add the plugin to our .babelrc .

In terminal:

yarn add babel-plugin-transform-es2015-arrow-functions babel-cli

In .babelrc

  "plugins": ["transform-es2015-arrow-functions"]

In terminal:

yarn babel src/main.js

Note:We use yarn in front of the babel binary (if we're using yarn) to get our package dependencies right.

And the output speaks for itself:

Babel Integration with Webpack

So that's from the command line. In our webpack config, let’s add the babel loader to our rules array.

  test: /.js$/,
  exclude: /node_modules/,
  use: [{
    loader: "babel-loader"

We tell it to exclude node_modules as they are already ES5 and we don't want babel transpiling everything, very slow. Just our project code.

When we restart with yarn start we now have the full power of Babel at our disposal. We can extend our javascript with any and all new ideas from the javascript community.

In the case of transformations that javascript can handle, no polyfills or additional libraries are needed to rewrite the code, so the file size doesn’t change much.


关于Babel6你需要了解的六件事 在过去的一年中,Babel已经成为将ES2015和JSX转变成枯燥的旧JavaScript的前沿工具。但是看起来在一夜之间, Babel 6 改变了一切。 babel包被弃用,运行的babel实际上并没有将ES2015转换成ES5,而且旧的文档基本上已经 消失 但不要...
babel-polyfill使用与性能优化 文章概览 本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。 本文所有例子可以在 笔者的github 找到。 什么是babel-polyfill babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方...
babel-preset-env学习指南 文章概览 babel-preset-env是非常重要且常用的一个插件预设,掌握它的用法以及实现原理非常有必要。 本文主要内容包括:babel-preset-env是什么、入门实例、如何配置以支持特定版本的 node/浏览器、实现原理等。 本文所有例子可以在 笔者的github 找...
Smaller Lodash bundles with Webpack and Babel One of the benefits of working with smart people is that you can learn a lot from them through osmosis. As luck would have it, a recent move placed m...
Open Source: 9 steps to my first feature contribut... This post was originally posted on About two months ago I realized that contributing to open source is a massive opportunity...