Why do we need to use import 'babel-polyfill'; in react components?

Question

I wonder if we user babel loader + all the presets, why do we need to include babel-polyfill anyway into our components? I just think that babel-loader should do all the job itself.

Examples were taken here https://github.com/reactjs/redux/tree/master/examples

What i am asking about is:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';

Here is package example:

{
  "name": "redux-shopping-cart-example",
  "version": "0.0.0",
  "description": "Redux shopping-cart example",
  "scripts": {
    "start": "node server.js",
    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
    "test:watch": "npm test -- --watch"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/reactjs/redux.git"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/reactjs/redux/issues"
  },
  "homepage": "http://redux.js.org",
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.2.1",
    "redux": "^3.2.1",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.1.1",
    "cross-env": "^1.0.7",
    "enzyme": "^2.0.0",
    "express": "^4.13.3",
    "json-loader": "^0.5.3",
    "react-addons-test-utils": "^0.14.7",
    "redux-logger": "^2.0.1",
    "mocha": "^2.2.5",
    "node-libs-browser": "^0.5.2",
    "webpack": "^1.9.11",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.9.1"
  }
}

Here is webpack config example taken from https://github.com/reactjs/redux/tree/master/examples

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel?presets[]=react,presets[]=es2015,presets[]=react-hmre' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json' ],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
}

Answer 1

Babel transpiles your code to something that browsers can understand, but the resulting code uses features that may or may not work in every single browser. For example Object.assign is not supported in all browsers, so babel-polyfill fills the holes. It's just a collection of polyfills that you would usually include anyway to have support for legacy browsers.

Consider this code:

const foo = {
  name: 'Homer'
};
const bar = Object.assign({}, foo, {age: '?'});
console.log(Object.keys(foo), Object.keys(bar));

Babel will transpile this to the almost identical:

'use strict';
var foo = {
  name: 'Homer'
};
var bar = Object.assign({}, foo, { age: '?' });
console.log(Object.keys(foo), Object.keys(bar));

because this is normal old school JS syntax. However, that doesn't mean that the native functions used are implemented in all browsers, so we need to include the polyfill.