Pourquoi avons-nous besoin pour utiliser l'importation de "babel-polyfill"; réagir composants?

Je me demande si nous avons de l'utilisateur babel chargeur + tous les presets, pourquoi avons-nous besoin d'inclure babel-polyfill de toute façon dans nos composants? Je pense juste que babel-chargeur doit faire tout le travail lui-même.

Exemples ont été prises ici https://github.com/reactjs/redux/tree/master/examples

Ce que je demande est:

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

Voici exemple de forfait:

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

Ici est webpack config exemple tiré de 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
      }
    ]
  }
}

OriginalL'auteur Rantiev | 2016-03-24

  1. 25

    Babel transpiles votre code pour quelque chose que les navigateurs peuvent comprendre, mais le code résultant utilise des fonctionnalités qui peuvent ou peuvent ne pas fonctionner dans chaque navigateur. Par exemple Object.assign n'est pas pris en charge dans tous les navigateurs, afin de babel-polyfill remplit les trous. C'est juste une collection de polyfills que vous comprennent normalement de toute façon pour avoir le support pour les anciens navigateurs.

    Considérer ce code:

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

    Babel sera transpile ce pour la quasi identique:

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

    parce que c'est normal de la vieille école JS syntaxe. Toutefois, cela ne signifie pas que les fonctions natives utilisées sont mis en œuvre dans tous les navigateurs, donc nous avons besoin d'inclure le polyfill.

    Si j'ai tout transpiler développeur je pense comme ceci: Ok -> j'ai besoin de faire de laisser de var, oui? Yep! La prochaine chose, ok je veux faire la fonction qui ajoute la même fonctionnalité de l'Objet.attribuer. N'est-il pas le comportement attendu? Ainsi, si l'Objet.attribuer est dans l'es6, transpiler (ou preset) devraient occuper de cela. S'il existe dans l'es7, es7 preset devriez prendre soin de cela. Pas de module supplémentaire que même pas un transpiler qui doit s'asseoir dans chaque fichier que j'ai. Permet de faire des modules supplémentaires pour laissez -> var remplacement. Espérons que quelqu'un sera d'accord avec moi que cela a du sens. Merci pour une explication de la manière.
    Eh bien, polyfills ont été autour pour toujours, parce que IE, Chrome, Firefox, etc n'ont pas la même fonctionnalité de mise en œuvre. Babel ne s'occupe que des choses comme des flèches fonctions, les importations, const, etc, mais en général, ne touche pas à la js fonctions de l'API. Si vous avez besoin de soutien IE9 ou que ce soit, ce n'est pas quelque chose de Babel faut s'en préoccuper. Il crée un script javascript qui suit les modèles traditionnels, les fonctions utilisées, cependant, est votre travail pour polyfill si nécessaire.

    OriginalL'auteur dannyjolie