如何正确解构？

Question

在IE11中，我在bundle.js的下面一行使用@material-uicore出现了语法错误。

const withStyles = (stylesOrCreator, options = {}) => Component => { const {
withTheme = false,
flip = null,
name } = options  

箭头函数在安装@material-ui之前是可以工作的这是我的.babelrc:

{"presets": ["react", "env", "stage-2"],
 "plugins": ["transform-async-to-generator", 
"transform-es2015-arrow-functions" ,"transform-object-rest-spread", "transform-async-functions", ["transform-runtime", {
"polyfill": true,
"regenerator": true
 }]]
}

react v16.3.2

Answer 1

看起来你使用的是 破坏任务，尝试使用插件 ES2015解构改造 来帮助解决这个问题。

{
 "presets": ["react", "env", "stage-2"],
 "plugins": [
   "transform-async-to-generator", 
   "transform-es2015-arrow-functions",
   "transform-object-rest-spread",
   "transform-async-functions",
   "transform-es2015-destructuring" // added
   [
     "transform-runtime", 
     {
       "polyfill": true,
       "regenerator": true
     }
   ]
 ]
}

希望能帮到你

Answer 2

我在IE11上测试时也遇到了这个问题。我不想在Material UI的代码上使用Babel，因为他们在内部处理。根据 https:/material-ui.comgetting-startedsupported-platforms。:

Material-UI支持所有主要浏览器和平台的最新、稳定版本。我们也支持Internet Explorer 11。你不需要提供任何JavaScript polyfill，因为我们在内部隔离管理不支持的浏览器功能。

后来我发现我们有一些不正确的导入，并进行了纠正。

import Typography from '@material-ui/core/es/Typography/Typography' // incorrect
import Typography from '@material-ui/core/Typography' // correct

es模块的直接导入破坏了MUI内部的兼容性处理。