为啥我们需要使用 import 'babel-polyfill';在反应组件中?
Posted
技术标签:
【中文标题】为啥我们需要使用 import \'babel-polyfill\';在反应组件中?【英文标题】:Why do we need to use import 'babel-polyfill'; in react components?为什么我们需要使用 import 'babel-polyfill';在反应组件中? 【发布时间】:2016-07-11 19:57:07 【问题描述】:我想知道如果我们使用 babel loader + 所有预设,为什么我们需要在我们的组件中包含 babel-polyfill?我只是认为 babel-loader 应该自己完成所有工作。
示例取自https://github.com/reactjs/redux/tree/master/examples
我要问的是:
import 'babel-polyfill';
import React from 'react';
import render from 'react-dom';
import App from './containers/App';
这是包装示例:
"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"
这是取自https://github.com/reactjs/redux/tree/master/examples的 webpack 配置示例
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
]
【问题讨论】:
【参考方案1】:Babel 会将您的代码转换为浏览器可以理解的内容,但生成的代码使用的功能可能会或可能不会在每个浏览器中都有效。例如 Object.assign
并非所有浏览器都支持,因此 babel-polyfill 会填充这些漏洞。它只是一个 polyfill 的集合,你通常会包含它们以支持旧版浏览器。
考虑这段代码:
const foo =
name: 'Homer'
;
const bar = Object.assign(, foo, age: '?');
console.log(Object.keys(foo), Object.keys(bar));
Babel 会将其转换为几乎相同的:
'use strict';
var foo =
name: 'Homer'
;
var bar = Object.assign(, foo, age: '?' );
console.log(Object.keys(foo), Object.keys(bar));
因为这是正常的老式 JS 语法。但是,这并不意味着使用的原生函数在所有浏览器中都实现了,所以我们需要包含 polyfill。
【讨论】:
如果我有任何转译器开发人员,我会这样想:好的 -> 我需要从 var 生成 let,是吗?是的!接下来,好的,我想做一个添加与 Object.assign 相同的功能的函数。这不是预期的行为吗?因此,如果 Object.assign 在 es6 中,转译器(或预设)应该处理这个问题。如果它存在于 es7 中,es7 预设应该关心这个。没有附加模块,甚至不是应该位于我拥有的每个文件中的转译器。让我们为 let -> var 替换做额外的模块。希望有人会同意我的观点,这是有道理的。顺便感谢您的解释。 好吧,polyfills 一直存在,因为 IE、Chrome、Firefox 等没有实现相同的功能。 Babel 只处理箭头函数、导入、const 等,但通常不涉及 js API 函数。如果你需要支持 IE9 什么的,那不是 Babel 应该关心的。它只是创建遵循传统模式的 javascript,但是使用的函数是你的工作来填充 如果需要。以上是关于为啥我们需要使用 import 'babel-polyfill';在反应组件中?的主要内容,如果未能解决你的问题,请参考以下文章
为啥 RVM 卡在“#importing default gemsets,这可能需要时间”?
为啥 !important 需要 h1 元素媒体查询才能工作? [复制]