Geek Answers Handbook

Why do we need to use the babel-polyfill import; in the reaction components?

I wonder if we load the babel loader + all the presets, why do we need to include babel-polyfill anyway in our components? I just think that babel-loader should do all the work.

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

What am I asking:

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

Here is an example package:

 { "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 a webpack configuration 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 } ] } }
+6
source share
1 answer

Babel converts your code into something that browsers can understand, but the resulting code uses features that may or may not work in every browser. For example, Object.assign not supported in all browsers, so babel-polyfill fills the holes. This is just a set of poly-regiments, which will usually include support for older browsers.

Consider this code:

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

Babylon will translate it in much the same way:

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

because this is the usual old JS school syntax. However, this does not mean that built-in functions are used in all browsers, so we need to enable polyfill.

+15
source

More articles:


All Articles