Neden 'babel-polyfill' ithalatını kullanmalıyız; reaksiyon bileşenlerinde?

Question

Babel loader + tüm hazır ayarları kullanıcı olarak kullanmamızı istersek, neden babel-polyfill'i bileşenlerimize dahil etmeliyiz? Ben sadece babel-yükleyicinin tüm işi kendisinin yapması gerektiğini düşünüyorum.

Örnekler Ne i konusunu soruyorum olduğunu https://github.com/reactjs/redux/tree/master/examples

burada alınmıştır:

İşte

{ 
    "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" 
    } 
} 

webpack https://github.com/reactjs/redux/tree/master/examples

alınan yapılandırma örneğidir:

İşte

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

paket örneğidir

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, kodunuzu tarayıcıların anlayabileceği bir şeye aktarır, ancak ortaya çıkan kod, her tarayıcıda çalışabilecek veya çalışmayabilecek özellikler kullanır. Örneğin, tüm tarayıcılarda Object.assign desteklenmez, bu nedenle babel-polyfill delikleri doldurur. Bu, eski tarayıcılara destek sağlamak için genellikle dahil edeceğiniz bir dizi poli-top toplamasıdır.

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

Babel neredeyse aynı bu transpile olacaktır:

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

bu normaldir eski okul JS sözdizimi çünkü

bu kodu düşünün. Bununla birlikte, bu, kullanılan yerel işlevlerin tüm tarayıcılarda uygulandığı anlamına gelmez, bu yüzden polfill'i dahil etmemiz gerekir.